How to remove grey background Woodmart slider and remove gap from header

Hello, i am trying to use woodmart slider to replace rev slider.
Attached are my setting

would you show me
1. How can i set the slider background to white. I dont set the colour anywhere but it just appear light grey
2. How can i remove the gap between slider and header ? while still maintaining gap at my single product page

Thank you
joie

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshots you attached.

1) You can set the background color of the slides individually by editing the slides. Or can try adding the background to the row in which you added the slider.

2) Please provide a relevant screenshot with the URL of the page to check it myself and help you out accordingly.

Best Regards.

Url is : dev.plastikpedia.id

The woodmart slider has a gap before header.
Gap is doubled at mobile phones.

I am trying to put the images behind the text by using negative margin.

First row consists of repsonsive texts and buttons
Second row consists of just single image.

I tried to put negative margin but somehow the background color of first row is blocking the second row view eventhough i have not set background in any of the rows

Hello,

I have visited your website.

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.main-page-wrapper {
padding-top: 0px;
}

Best Regards.

Hello, i have put some colours into row backgrounds so that it is easier to see what i mean.

The provided css cannot eliminate the gap yet, so i remove that from custom css.

here are the screenshot.

Here is my setting at slide
https://snipboard.io/FcS6Ao.jpg

Here is on laptop
https://snipboard.io/iNdbe3.jpg

Here is on mobile – the gap widens double is size
https://snipboard.io/kJoyic.jpg

site is at dev.plastikpedia.id
I cannot make the image appear behind the text eventhough i am using a negative margin

Hello,

I have revisited your website and space is due to the padding and the header margin.

Please add the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.main-page-wrapper {
padding-top: 0px;
}

And on the mobile devices, a margin is added to the header. Please try adding the following Custom CSS in the Custom CSS for the Mobile area under Theme Settings >> Custom CSS.

.whb-header {
margin-bottom: 0px;
}

And for the image try adding the image in the same row with the other content then check back.

Regard’s.
Xtemos Studio.

Hello it is working.
But the single product page is also shifted up .

More question.
1. Is it possible to shift the feature image to shift to left by 50px only for mobile devices using css.
2. I duplicated the slide #1. However slide no 2 is a mess when clicking the next slide arrow.
Url is dev.plastikpedia.id

Thank you
Joie

Hello,

You can specify the CSS for only the page by using the page id with the CSS.

“.page-id-1264”

1) Please provide a relevant screenshot of which feature image you are asking to check it myself and help you out accordingly.

2) Please recreate slide 2 because duplicating the slides sometimes causes issues.

Then clear the cache and check back.

Regard’s.
Xtemos Studio.

OK i have recreate slide 2 and it seems working.

I have issues of text in slide one sometimes missing. But that is for another ticket later.
THank you
Joie

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts