Streaming live at 10am (PST)

Adjusting styles at breakpoints


#1

I watched the webflow tutorial on this but didn’t find it very helpful. I’m trying to understand how I can adjust my type at the two different breakpoints you see in the attached images. I want to be able to adjust the styling at different breakpoints WITHOUT affecting the other breakpoints. For example, I want to be able to adjust the hard return where the word “complex” is in the first screen shot. Is there an easy way to do this?


Here is my site Read-Only: https://preview.webflow.com/preview/jeffwoodsdesign?preview=7e70e0a47652e619eaef544681bf6771

Published Link: www.jwoodsdesign.com


#2

On that element, in Typography settings, starting on Desktop view. For font size, type in 5vw, and hit enter. (or add whatever size is best)

On tablet, go down to 2 or 3. You’ll be able to tell which best. Simply do this for each device view.

I’ll add quick video:


#3

@garymichael1313 thanks again!

I was able to do this but I noticed when expanding and narrowing the window, the title, “Hi, I’m Jeff.” shrinks and expands in a weird way along with it. I don’t know if you can test it on your end, but I’m not sure if this is supposed to be happening? I would record a gif for you but not sure what you guys are using over there.

Also, how do I fix the hard returns on the word “complex”? Should I make those vw’s as well?


#4

Check the video, it will show a simple way to fix it :grinning:


#5

@garymichael1313 thank you so much for taking the time to do all of that! I’m new to Webflow so it’s a little difficult for me to follow exactly what you were doing but it looks like you need to do a lot of manual work to get your design to look good on all breakpoints?


#6

Oh Great, Welcome!!

You’ll be pro in no time, just repetitions :grinning: The “VW” is a simple workflow, because if you add it on desktop, it flows down, then you just ‘Arrow Up’ to increase size on other device views. Then adjust the line height on the right side of Typography settings, to create proper vertical spacing inside the text box.

Do this for all text elements within that section. But make sure you write down or use style guide so you can replicate the steps.

Glad to help. Have fun.