Streaming live at 10am (PST)

Styling Mobile Sites With Breakpoints

I am styling a mobile version of my page with Breakpoints.

I see that I can style things differently and those changes do not affect the desktop site. Thats cool and exactly what I wanted to find.

But what if… I wanted to change the header graphic to something that makes more sense for a mobile sized screen? Can that be done? Because right now when I attempt to replace the graphic in question, it replaces it in all versions.

Thank you.


Here is my site Read-Only: Webflow - DroneGuyCDA.com

If you use background-images you can have different versions per breakpoint without too much trouble, however these won’t take advantage of the native responsive image feature in Webflow.

Another option if you’re wanting to use Image elements instead is simply creating multiple elements and using display: none on the breakpoint you want to hide a specific Image. Keep in mind that this method will still load all the images—even the ones that are hidden—so load times could be affected.

If you’re appropriately compressing your images and using the right size background-image for each breakpoint you should be fine to use the first option :+1: