Help - Responsivenss of 1200px width viewport

Design help General
1

Hello Webflow community.

I’m in deep water. And I hope you will help me. I’ve read some of the posts about it on the forum, but I still don’t get it.

Currently, I’m building a website for a client who wants a viewport of 1200px instead of 960px. I don’t have experience with this. While everything looks great in desktop mode with div wrapper’s width set to 1200px, I find it difficult to make it responsive.

This is the website I’m currently developing:
https://preview.webflow.com/preview/renvirk?preview=62215c241774bf2db7569dcaf19653ad

I want to make the header (w/ navbar) + the four buttons in the hero responsive. How do I do that?
The responsiveness of the header is especially important to me.

I hope you’ll help me :slight_smile:

1 Like
2

Hi @Curting - Here’s one option - I use this bit of code to make sites wider and still remain responsive. This extra width doesn’t show in the designer but will on the live, published site.

<style type="text/css"> @media screen and (min-width: 1280px) { .w-container { max-width: 1170px; } } </style>

Just stick this in the main Head Code section under the ‘Custom Code’ tab. NOTE! Some things may go out of line as the site widens and may need adjusting - but you can’t see this until you publish. Hope it helps! Regards - Kai

1 Like
3

Oh, thanks a lot. That’s a nice hack! :slight_smile:
Thank you for your help.

4

One more question; do you know how I can get the menu buttons to fill out (with padding) the entire width of the navbar? Because if I add padding equivalent to the 1280px it will bug when it goes down to 1170px.

5

hi @Curting - My pleasure! I can’t take credit for it! I got it from someone on this forum a while ago! :slight_smile:

Regarding the nav bar, if you take everything out of the container, it will fill the full width. It’s only the container element that conforms to 960px width (adding the code above will make the containers 1280px).

Be careful using forced px widths on things. It can cause you problems down the road with tablet and mobile versions - Unwanted side scrolling on mobile version, for example - Always try and use % or ‘Auto’ to keep things fully responsive - that’s what the pros on this forum tend to say anyway. I learnt that the hard way!! Best of luck!

1 Like
6

Thank you very much for your responses, @Keejo. It all works out now! :slight_smile:

7

That’s a very good point and I wonder why the container is constrained to 960px rather than a percent of the screen. I’m curious what the advantage (if any) adding a query to the viewport provides when everything can be scaled using %.

8

Open the navbar and move all elements out of the container.

Then delete the container.

Image: Shows navbar with container.

Image: Shows navbar without container.

9

[960px] discussion

[1200px] discussions

[break-points][media-queries]

10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.