Woodmart slider not responsive

Hello,

I have an issue with woodmart slider not being responsive on mobile.
I created a slider, which is working fine on PC with a height of 700px, and I set up a lower height of 350 px on mobile using the slider settings. However, it does not work and console is showing 700 px on mobile. Could you please help?

Attachments:

You must be logged in to view attached files.

Same thing with a simple section with background.
It seems that the issue comes from the section being an HTML block inserted as product category description. In that case, responsiveness does not work.
How can I solve this please?

Attachments:

You must be logged in to view attached files.

Please disregard last reply. Only 1st one concerning Woodmart slider is still occuring.

Hello,

We are Glad that one of your issues has been resolved.

For the slider mobile issue. Please try recreating the Slides and check back.

If the issue still occurs then provide the admin panel login details of the website.

Best Regards

Thank you, I will try and let you know.

Another question please: I am using woodmart hotspot module as a banner with an image of 1920×600 on PC. However, I cannot set a different size on mobile with the module. Would you please have some css to make it responsive and avoid me to have 2 hotspot sections (one hidden on mobile and one hidden on PC)?
Also, could I apply some black overlay to make the white text clearer as well?
Thank you very much

Hello,

You are Most Welcome.

Sorry but if we try using Custom CSS then it could affect the images quality. You should create 2 sections and hide it for Desktop.

And provide a screenshot where you want to add an overlay to check it myself and help you out accordingly.

Best Regards

Thank you for your answer regarding issue with Hotspot responsiveness.
Regarding the overlay, I’d like to add a slightly transparent black overlay on the hotspot image. For exemple in the screenshot attached (also in url provided) to make the menu white font easier to read.

Attachments:

You must be logged in to view attached files.

Hello,

You are Most Welcome.

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

.wd-image-hotspot-hotspots::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .5);
}

Best Regards

Thank you.
Can I use a css class fro this otherwise it applies to other hotspot images on the website where I don’t want the overlay?

Sorry, I found the solution.
Thank you very much for your help

Hello,

We are Glad that your issue has been Resolved.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts