Streaming live at 10am (PST)

Need help making text responsive!

I have to finish a website for a client by Friday. Because it’s an ecommerce site, I want the layout (more specifically, floating text and button) to look good on all devices. I’m just really freaking out because it’s not responsive. The navbar is, but no matter what i try like switching from px to vh and vw, or trying to change its positioning it won’t work. Please help me out!

Here is my site:

Welcome to the community @ncampbell31!

Are you talking about the main text in the hero or something else? The most straight forward way to make something responsive is by changing the style on the smaller breakpoints so that it works across the breakpoint size range. A neat trick for text specifically is to change its size from PX to VW so that it scales proportionally based on the screen width.

If you share you’re ready-only link I’d be happy to take a closer peek to make sure there’s no adjustments that can be done outside of that along with taking a look at how you’ve set things up so far :+1:

here you go! I was referring to the text and the button.

In your case it looks like you tried to change the max/min-width of the H1 element itself, but what I’d suggest is instead changing the font size starting at the mobile landscape breakpoint to something smaller (like 7em) and change the left margin to a VW unit (13vw works well) to give it some more horizontal space that responds to the screen width as it gets smaller:

Then for the mobile portrait breakpoint, you can change the font size to VW units (something like vw works well) and then it will proportionally scale based on the width. Keep in mind that the left margin adjustment from the landscape breakpoint just cascades down (as it seems to work well) but you can always adjust this as needed:

That said, I’d recommend setting up some containers for your content that keeps your elements within a certain width as right now you’ll probably run into issues trying to keep everything aligned within the same area across your breakpoints. If you haven’t done so, I’d take some time to run through some of the parts of the recent 2021 Design Portfolio course on Webflow University as it does a good job covering how this is setup and why it helps when it comes to making the site responsive and consistent:

Thank you so much! I wish you could walk me through this as i’m kind of new to the software.