Streaming live at 10am (PST)

Responsive site not happening

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?

Here is my webflow.io link

Here is my shareable link-

I would be so grateful for your help.
Thanks in advance
Kazz


@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:

image

The footer is doing the same thing:

image

These sections also need to do something different on mobile:

image

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:

image

image

By simply removing it you get a much nicer navbar:

image

From here you could adjust the padding to make the nav background a bit slimmer:

image

image

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.

I appreciate your time and advice.

Read Only

I think I’m getting there. I just need to be confident it looks good on all devices.

Thanks again

Kazz