I’m still getting to know webflow. Struggling with trying to get a max width on this header in desktop. I want it to be no longer than 1400 pixels wide and stop stretching to the edge after that. In other words I don’t want each side locked to the edges if you have a gigantic window. And I still want the header to be responsive of course when it shrinks. Anyone point me in the right direction of what combo of elements and classes I should be using to make this work?
Hi @Bodwa
Can you share your preview link for more precise help?
You can usually use the ‘max’ width setting for this kind of thing, so it would keep stretching to 1400 then stop…
So sorry I forgot to include this. Here it is. I tried the max width in a div… but that didn’t work for me… likely due to one of my other css settings?
http://pickleville-playhouse.webflow.io
Thanks!
Hi @Bodwa
Almost there 
The link you sent is the ‘published’ site - which is of course useful - however, even better is the ‘preview’ link (see above for how-to) as that is a read-only view of your project from the ‘Designer’ view.
We can then see which settings you have and try a few solutions without affecting your actual design.
Man. I’m so sorry. You can tell how new this is to me. I get what you mean now. Here’s the appropriate share link:
https://preview.webflow.com/preview/pickleville-playhouse?preview=0ad8b8334dc7a15cc56007eae8fd0217
Thank you for bearing with me 
No worries @Bodwa - it will soon be familiar!
So just to check, are we looking at making this work on the PVP header, or the Section 2 banner image?
Thanks @StuM The PVP header is where we are looking. this page still has lots of work otherwise… but I’m just not understanding why the max width doesn’t seem to be affecting things… Or this may be setup incorrectly from the start perhaps on that header to do what I want it to do?
Hi @Bodwa
Here’s the settings I think you need on the ‘logo header’ div (double click to edit symbol)
Click to open full view screenshots
Once you’ve set a width (like 100vw) you can then click that option on the right of the screenshot to centre things. This should be telling the browser to display the div at 100% of viewport width, but up to a maximum of 1400px.
The divs inside the header - one way to style them is add some margin/padding to them, and then set a percentage for their widths like 25/30%. The effect should be that they float and resize as the browser window changes size - but staying centred and in proportion to each other.
Alternatively set div block 4 to flex - horizontal - justify space between. This will push the left and right divs to the edges and keep the middle one centred - with these settings. I think this is the closest to what you are trying to achieve:
More details on flexbox in Webflow here:
Hope that helps - let me know if not and we’ll dig deeper!
Bless your soul @StuM! Looks like that was exactly the ticket I needed for this. Thank you so much for this good help. I’m really looking forward to creating more great stuff with Webflow. Today I figured out a great way to make a custom calendar with flexbox. It’s seriously powerful stuff. Thanks again for your help!
Great! I get a buzz solving things wherever I can!
We have a category in Design - Show & Tell - it would be great to see your custom calendar idea when you are ready, and you’ll get useful feedback too
1 Like