[Solved] Column width resizing

[Randy]

I’m really stumped on this one… If you take a look at the menu page of http://sweetgreen.com/menu and scroll down to where they have a list of their salads in three columns, and resize you’re browser, you’ll notice that in spite of having a wide site width, resizing your browser doesn’t much interfere with the side navigation on the left.

I’m working on a similar kind of layout, and am using the standard 980 width for the site, but when resizing the window, the side navigation overlaps the text.

Can someone tell me how they did it, and how I can replicate that same effect?

Thanks SO much,

[Randy]

Thanks for the reply bearhead. I’ll try and explain more clearly.

If you look at sweetgreen’s salad menu, they have 3 columns, and the left navigation buttons on the left hand side of the page in the center.

the width of their content on my screen (24″ monitor) is 1200px. If I resize my browser, the width of the content changes accordingly to say 800px. …and stays in the center so that the left and right sides of the site are still consistent.

On the site I’m building. the content area is 980px, and when I resize my browser, the content area stays the same width (987px) and the left and right side of the site are getting narrower which causes the left side navigation tabs to overlap the text.

Maybe their using some js to do this? I don’t know much about js.

[Soren]

Apologies if I’ve misunderstood your query, too. I read it as you wondering how sweetgreen avoid the sidenav overlapping the centered content on smaller screens (when you resize window).

Here’s a quick codepen that demos their technique

codepen.io/soren-tree/pen/ExdaD

Resize content wrapper with media queries (width and padding)

You say your content’s width stays at 987px on resize. Is it’s css “width: 980px” instead of “max-width: 980px”?

sweetgreen use a percentage width for their content wrapper.

[Randy]

Thanks a ton Soren, Now I just need to work on integrating it into my site.

[Soren]

You can do it : ) This forum will always be happy to help if you need it.

[Author]

Posts