I’m currently making my portfolio website responsive and am altering the mobile design; however, there are some elements that I edit that change the design/layout on the desktop version. I learned that content will change across the board, but I thought styling wouldn’t.
Ie. I wanted to change how an image was displayed on mobile by splitting it up into two images instead of one. However, it changed the desktop design as well.
Is there a way to make changes on mobile that won’t impact my desktop design/styling?
Anything you edit, e.g. creating/deleting elements or changing content, binding or settings are global to your site. Those types of changes are not breakpoint-specific
Anything you style, cascades outward from the Desktop breakpoint ( which has the * in top selector ). Anything you style at desktop will also apply to tablet, landscape, portrait, and larger breakpoints unless you override it.
When you override a style, from that point outwards that new style rule is applied unless, once again, you override it.
For example.
drop a heading element on your canvas
give it a new class like test-heading
My default it’s probably black, depending on your Body and All Headings styles.
now go to tablet and make it red
check landscape and portrait, you’ll see they’re now red too
now go to landscape and make it blue
You have two rules- tablet = red, landscape = blue.
The way breakpoints work, your heading color will be black at desktop and higher breakpoints. Red at tablet. Blue at mobile landscape and portrait breakpoints.
All styles work this way.
What Jovil’s suggesting is that you can make that heading style display: none at desktop, and then style display: block at mobile landscape. That will make it visible on mobile devices only.
You really won’t be able to do much with Webflow until you learn how classes, styling, and compound classes work well, so definitely do the Intro to Webflow courses in Webflow-U.
if you dropmake a heading red at desktop. it’s red everywhere.