This may be a simple question that I’m just super overthinking, but how does one change the styles of an element across different desktop widths only?
For example, I’m sitting in front of two computers right now — one large desktop and a smaller laptop. I have an H1 on my website that looks fine on desktop, but I would like to change the style of the element for laptop screens. When I resize the canvas using the drag tool and try to change the element’s style at a smaller breakpoint, it makes the change for all desktop widths, even the bigger ones.
Is it possible to make a style change for laptops with smaller monitors without affecting a wider desktop monitor? Thanks in advance to anyone who can offer advice!
No you can’t do this for multiple desktop views. But you can use “VW or %'s” for width so the content scales up and down. Text will always need to be scaled manually anyway, by adding a typography setting to each device view. Settings for larger screen sizes is something that others have put on the ‘wishlist’. There may be some custom code online to add. Hopefully someone in the community will share a snippet to use.
You can add your own css media queries to the “custom code” section of your website settings. Or if you want to just apply it to a single page you can add it to the header of that page.
In this example the font size for the class “your-classname-here” will change to 60px whenever the window is equal to or greater than 1440px. Feel free to change it accordingly.
If you are interested in learning more you can read up on CSS media queries here: CSS Media Queries
Also make sure to keep in mind that Webflow that webflow automatically makes any classnames you assign in their interface standardized. CSS classes aren’t allowed to have spaces
So if for you named the item class “awesome header” the actual class name will be “awesome-header”
