How can I hide an image element on a Desktop view but still show it on Tablet and Mobile views in Webflow?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To hide an image element on a Desktop view but still show it on Tablet and Mobile views in Webflow, you can use Webflow's built-in responsive design settings. Follow these steps:

Select the image element you want to hide on the Desktop view.
In the Styles panel on the right, go to the Selector field and click on the plus icon (+) to add a combo class.
Give the combo class a name, e.g., "hide-desktop".
With the new combo class selected, go to the Display settings in the Styles panel.
Set the display property to "None". This will hide the image element when the combo class is applied.
Switch to the Tablet view by clicking on the Tablet icon in the top navigation bar.
With the image element selected, go to the Selector field again, and this time add another combo class (e.g., "show-tablet").
Select the newly added combo class and go to the Display settings.
Set the display property to "Block" or a fitting value to show the image element on Tablet views.
Repeat Step 6 to 9 for the Mobile view, creating a new combo class (e.g., "show-mobile") and adjusting the display settings accordingly.

After applying the above steps, the image element will be hidden on Desktop views with the "hide-desktop" combo class and shown on Tablet and Mobile views with the respective combo classes assigned.

Example:

Here's an example of how the responsive settings may look in your Styles panel after applying these steps:

Default state (Desktop): No additional class applied
Tablet view: Combo class "show-tablet" with display property set as "Block"
Mobile view: Combo class "show-mobile" with display property set as "Block"

This approach allows you to easily control the visibility of an image element based on different device breakpoints in Webflow.

Benefits of this approach:

It eliminates the need for custom CSS or JavaScript to hide and show elements on different views.
It ensures a smooth and responsive design across different devices.
It keeps your HTML markup clean and semantic.

Additional Questions:

How do I apply responsive settings to other elements in Webflow?
Can I animate the visibility of elements on different device views in Webflow?
How can I create custom breakpoints for more precise control over the display of elements in Webflow?

How can I add static text on top of the slider slides using Webflow?

What is the best way to make all the logos in a grid the same height in Webflow?

How can I make a section in Webflow stop at the top of the screen when scrolling?

How can I change the color of the text on my nav bar when hovering over it in Webflow?

How can I fix the issue of my images appearing small on the browser in Webflow?

Is it possible to disable scroll on a page in Webflow and have custom "back" and "next" buttons guide the user to a new section when clicked?

How can I remove the white area in the navigation for the desktop version in Webflow?

How can I recreate a form with a dropdown menu in Webflow that allows for multiple selections?

What is the issue with lightbox activation while scrolling on mobile and tablet devices in Webflow? Can you explain the strange behavior that occurs on Mobile Landscape in Webflow?

What are some possible solutions for embedding a high-quality, responsive background video in Webflow that does not result in low quality on mobile devices?