Trouble with Mobile Version

Hi,

I’m struggling to make my mobile version look good for all versions. It’s not centered and my columns are a mess. Here’s a link to my site: https://preview.webflow.com/preview/matts-business-starter-8cfb54?utm_medium=preview_link&utm_source=dashboard&utm_content=matts-business-starter-8cfb54&preview=8c41c61087e176c30a07e6ee85608a70&mode=preview

I’ve also attached images of my mobile site

The first shows that one of my columns is moveable and not centered, the second photo shows my intro header not centered when I zoom out on the mobile site.

Any help would be greatly appreciated!

Thanks for your time,

Matt

Let’s start with your columns, the way you have it set up is not really in columns, you actually have rows going across forming 9 columns:

This is one of your rows with “3 columns”. The recommendation I have is to make 3 actual columns that are one row each like this:

It’s a much simpler layout to control and will make your life easier. Unless you have a really good reason you need that section set up in that specific way (which is not a typical layout).

You can see the parent Container is going horizontally across with 3 child divs for the headers. The only way you could make that work on mobile is to use Grid, because it allows you to move children to different cells at different breakpoints. However I would strongly recommend setting this up differently and actually using real columns, much easier to work with across screen sizes.

Take a look at the flex and grid examples on this test project to get going in the right direction: https://preview.webflow.com/preview/testing-a7766d?utm_medium=preview_link&utm_source=designer&utm_content=testing-a7766d&preview=d29d876a5c9b2d01f435ef5cf3044c71&mode=preview

After getting that cleared up we can look at the header, but my thought is you may figure that out after solving your column issue.

-Sam

Hey Sam,

Thank you so much for your time! I really appreciate your help with this.

Have a great day,

Matt