How to show have images hidden on desktop and visible on mobile

Design help General
1

Hello!

I am trying to figure out how to have images hidden on desktop but showing on mobile. Basically i have a water background flipping vertically on my website going all the way down the page. But when i go to add a new image on mobile it extends my desktop website and i dont really want that. I want the desktop to stay the same length while allowing me to add more images on mobile. Any help would be greatly appreciated

Im attaching my webiste below

Here is my site Read-Only: Webflow - Blackbeard's Pool & Spa

2

Webflow styling always inherits from the Desktop breakpoint, and overrides at successive breakpoints outward from the center.

That means;

  • On desktop, wrap your elements, add a class we’ll call it mobile-only, set it to display: none.
  • On mobile, override the display style on that same element / class to display: block;

I prefer to wrap elements in this case rather than adding a subclass or global class because then it’s visually obvious in the Nav, and easy to move element in and out of that wrapper. It also creates a standard style and the elements within, can create different layouts ( flex, inline-block, grid, etc. ) without needing multiple global classes.

1 Like