How to Hide an Element on a Specific Viewport

Design help General
1

Right now Webflow doesn’t allow you to choose which breakpoints interactions will be active on and that’s a bummer.

I figured out a brute force solution for one of my specific cases, so maybe it’ll help someone else sort something out. Won’t work in every case.

Example:
When I hover over one element, another element shows up. The interaction changes height and opacity. I needed to disable this on tablet and below. I used a media query to muscle the element to be display: none on that breakpoint, keeping it hidden even though the interaction runs.

<style>
    @media (max-width: 991px) { /* tablet and below */ 
    .dropdown-list { display: none !important;  }}
</style>

Abuse as you like. :stuck_out_tongue_winking_eye: It ain’t pretty but it got the job done.

2

Hi @sarahc, thanks for your post. You can also use the Visible on settings for the element.

Select your element, then go to the Settings tab and set the element to be visible or not for the selected viewports.

See my attached screenshot:

776×400 24.5 KB

I hope this helps !

2 Likes