Streaming live at 10am (PST)

How to Change Styles across Desktop Breakpoint


#1

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!

@PixelGeek @Waldo @vincent any ideas?


#2

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.

Any custom code guys?


#3

Thanks for the response and advice! I’ll try using VW for my text size like you said. Hopefully Webflow makes settings for larger screens soon! :slight_smile:


#4

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.

Here is an example:

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: https://www.w3schools.com/css/css3_mediaqueries.asp


#5

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”

Anyway hope this helps you :smiley:


#6

Hey - thank you so much! I appreciate the solution a lot. I’ll give this a whirl and make it work as best I can.

Cheers! :smile:


#7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.