Hide a Slide on desktop

I am trying to hide slide on desktop. On mobile I have to make an extra slide so that way all the content can be in the slider. The problem comes in on Desktop, we don’t want to split the slide up. I can hide the additional content in slide 2 for mobile, and hide the extra slide content on desktop, but there is still a blank slide.

Anyone know a way to do this, I know I can just make 2 sliders and hide one on mobile and one on desktop but I want a clean looking designer.

1 Like

Are you using the Webflow slider element?

I might be misunderstanding, but I’d imagine this solution would work:

(1) To hide one slide specifically, select it and make sure it either has a combo class (learn more) OR is its own class (different from your other slides.)

(2) Then, on the Desktop breakpoint, set the display settings to display: none, then on the other 3 breakpoints, set the display setting to either display: flex or display: block (whatever it was before.)

This should hide the one slide on desktop but show it on Tablet and Mobile, without altering the slide you want to appear on all devices.

For more specific instructions: sharing your read-only link is helpful. Learn how to here!

(Edit: I obviously don’t use Sliders enough. :upside_down_face:)

The display settings are grayed out and say:
"Disabled to preserve slider functionality. If you need a different display setting for slider content, add a div block and style it instead. "

So if I div block all content in the 3rd slide then hide on desktop, the result is an empty 3rd slide. It still shows up on the slider tho.

Whoops! Sorry, I don’t use Sliders often.

Maybe custom code would work? Still give it a class that’s different than your other slider. Let’s say that the slider you want to hide has a class of slider1.

Then, in your page head, add the following:

<style>
    @media screen and (max-width:992px) {
        /* style ONLY for non-Desktop screens */
        .slider1 {
            display:none;
        }
    }
</style>

This code set the display style to display:none in a similar manner to what I described. Try this out (making sure to replace your class name (replace .slider1 with whatever your slider class is) and let me know if it works for you.

1 Like

This seems to hide the content of the slide but not the slide itself, ending up with a ghost 3rd slide on desktop screens for me.

https://preview.webflow.com/preview/monk-2-0-813c5005b12e6d2340877587499d24?utm_medium=preview_link&utm_source=designer&utm_content=monk-2-0-813c5005b12e6d2340877587499d24&preview=ef1fbfeabfb50625b17b72623d2a0223&pageId=61e808dec06d1527b1a0af97&itemId=61e808dec06d15e80ba0b08b&workflow=preview