Issues With Responsive Views

Hello,

I just started using Web Flow and I have a question about the responsive aspect of my website. When designing in the desktop view I can make the site look the way I want to. However, when i go to the phone portrait or landscape view the site is an absolute mess.

Would I need to redo each section in each view mode to make the site responsive or do I have the structure messed up and that is limiting me from having the responsive portion of my site from rendering correctly? I manually changed aspects on the portrait mode to make it look good but the landscape view is untouched.

I just feel like I am missing something.

Thank you,
Michael

Here is my public share link: http://brand-5280.webflow.io/
https://preview.webflow.com/preview/brand-5280?preview=157933ff044173cac0958a055e65fb23

Hi Michael! Welcome to Webflow :slight_smile:

I noticed that on mobile your button falls off the Hero section, so instead of giving a fixed height to this section I recommend that you use bottom padding:

Also, you are using fixed width and height values on the text inside your columns (“benefit-text” class). When you use fixed values, those won’t be responsive by nature and won’t adjust the content size to fit the screen.

You can use % or VW (Vertical width) / VH (Vertical Height) and adjust these on mobile views to fit your design.

Another suggestion would be to use Flexbox instead of Columns, that will give you a wider range of layout possibilites: https://flexbox.webflow.com/

Have fun with it :slight_smile:

Thank you! The flexboxes did the trick. I just created a new site so i can keep learning webflow.

1 Like

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