Streaming live at 10am (PST)

Site is not respecting container sizes when viewed on certain browsers

#1

Hi I desiged a site and it looks all nice and organized. But when I showed it on different laptops (using Microsoft edge and safari), the site appears all haphazard like you see below. It seems like i have a container which is not resizing as intended on this browser:

What it should look like:

I am also having a similar issue in my header area, the nav links are no longer appearing on the same horizontal plane as the company logo:

How it should be:

Please help thank you!! I attached my read only site link below

Here is my site Read-Only: https://preview.webflow.com/preview/ultra-high-maintenance-corp?utm_source=ultra-high-maintenance-corp&preview=14e1f0187d3614d33150805d539d7c67
(how to share your site Read-Only link)

#2

Hi @ChrisC - the screenshots are from a maintenance company, but your read-only link goes to a fireworks website. Can you post your correct read-only link so the community can try and help you out?

Also, please let us know what browser versions of Safari and Edge you’re using?

Thanks!

#3

Hi @myonke so sorry about that i copy pasted the wrong one! here is the correct site:
https://preview.webflow.com/preview/ultra-high-maintenance-corp?utm_source=ultra-high-maintenance-corp&preview=14e1f0187d3614d33150805d539d7c67

Thanks!

#4

@ChrisC, you have the grid for that content set to 137% which causes the content to spill beyond the parent container. You have positional offsets on the container as well to try to correct for that content being off center. They don’t solve the issue and will case a cascade of problems at every breakpoint.

If your goal is to make the content wider than the standard Webflow container, then don’t use Webflow’s default container. Instead build your own “custom container” to hold your content.

This [Video] Thoughts on Larger Breakpoints in Webflow 😎 shows you how and will solve that issue and will give you a ton of control over your site design. Watch it. It is a great way to layout content.

1 Like
#5

@ChrisC - it looks like you got this figured out using the advice from @vlogic. Let us know if you come across any more issues!

#6

@vlogic @myonke Thanks guys for the help, I am working on the issue related to the grid content width and should be able to sort that out. But do you folks have any insight as to what is causing the behavior seen in my header screenshots near the end of my original post? Thank you very much!

#7

@ChrisC - is this what you are trying to do?

#8

yes sir! thank you! but i am curious why my webflow looks different than yours- this is what I see currently on my site, everything already in a line:

it wasnt until my client previewed it on a different device/browser that the nav + logo started appearing on two lines.

is there a way to preview how your design will look at different desktop resolutions within webflow?

thanks!

#9

Glad that worked!

My guess on the differences in screens is that you are using a larger screen than me, so it wasn’t showing stacked on yours.

There are lots of Chrome extensions or websites that will show responsiveness on different screens, but I always found them buggy. I typically just zoom in or out on my own browser, and I know Webflow actually mentions this in one of their vids.