layer slider visibility on mobile error / ISSUE follow up on #1495764

Hey oestersund,

Thank you for the update.

You’re right, the issue is that the previous css uses display: none !important; without scoping it to a specific page, so it ends up hiding #layer_slider_2 on all pages, not just the homepage.

The fix is to wrap those rules in a page-specific selector. The easiest way to do this is to use the unique body class that WordPress adds for each page. For example, if your homepage has the slug “home”, the body class would be something like page-id-123 or home. You can check the exact class by inspecting the body tag in your browser’s dev tools.

Once you have the body class for your homepage, update the css like this:

/*Homepage Slider Laptop Mobile*/
@media only screen and (min-width: 768px) {
    .page-id-123 #layer_slider_1 { display: block !important; }
    .page-id-123 #layer_slider_2 { display: none !important; }
}
@media only screen and (max-width: 767px) {
    .page-id-123 #layer_slider_2 { display: block !important; }
    .page-id-123 #layer_slider_1 { display: none !important; }
}

Replace .page-id-123 with the actual page ID class from your homepage body tag. This way the hide/show rules only apply on the homepage and all other pages with layer sliders will display normally on mobile again. This documentation should help.

— https://kriesi.at/documentation/enfold/add-custom-css/#how-to-inspect-an-element-on-the-page

Please make sure to purge the cache before testing. Let us know if the issue persists.

Best regards,
Ismael

Hi,
Glad that Ismael could help, if you have further questions please open a new thread and we will try to help. Thanks for using Enfold.

Best regards,
Mike