Hi, I’m having issues with this site responding. It looks good in my Webflow account, but not so good on my sons 1920 x 1080 laptop. The Profile Grid moves around a bit from breakpoint to break point. I need it to look like the attached screenshot on all breakpoints- sans Mobile! Screen Shot 2020-09-15 at 6.49.37 am|542x500 I haven’t designed the mobile versions yet. How can I feel confident that my design will look like what I see in the Webflow designer?
@Kazz - you’re read-only link is not working so it’s hard to provide more specific feedback. What I’ll say though is that your site does not look set up to be responsive in many places.
For instance the services section has a ton of content overflowing and not stacking:
The footer is doing the same thing:
These sections also need to do something different on mobile:
The general idea is that once the screen is too small for content to fit horizontally you stack content vertically. You can do this in a variety of ways, usually using your display property (flex or grid).
One other note, I see max-heights on a lot of elements using the “vh” unit. I strongly recommend not setting max-heights on parent elements unless absolutely necessary and definitely not using the vh unit for this.
Control the height of the content within the parent and then use padding to control the overall height. For instance the max-height on your nav is causing this issue:
By simply removing it you get a much nicer navbar:
From here you could adjust the padding to make the nav background a bit slimmer:
Thanks for your help @sam-g, I mentioned I hadn’t yet designed the mobile versions when you looked at my links. I’ve removed the max heights using the vh unit on most of the parent elements.
