Good morning, I’m trying to understand the “target ÷ context = result” concept. Am I supposed to have a max-width in pixels and set the width to a percentage or vice versa? I have been setting my max-with 1100 pixels but also see people use 1140, 1170, and 1200 while having width to auto or 80% or what not. Can someone please give me the best advice here? Thank you.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Max-width and Width work independently on an element. Max-width defines the maximum width of an element. The element can get narrower if the viewport gets narrower but it won’t exceed the max-width value.
On the other hand, Width in % will make the element infinitely stretchable, and Width in px will make it non-responsive.
So, when you apply both Max-Width and Width to an element, they both start working independently. If the viewport gets wider than the defined Max-width value, the element will stop expanding. But, if the viewport gets narrower, the Width value kicks in.
I’ve prepared an example for you here: https://preview.webflow.com/preview/max-width?utm_medium=preview_link&utm_source=designer&utm_content=max-width&preview=1ebc724e28d860c0da73ba85289ea2b4&mode=preview
One div has a Max-width + Width and the other one has just Width in %. Take a look at it and I hope you’ll understand it better.
Hello Sir, thank you so much. I opened it up in the designer and saw that the div says 70% but says 80% on the style tab. Just want to know if Im reading this correctly. *Please dont mind the crazy questions Im about to ask, its just what goes through my mind. This is where I wonder how does the designer know what what percentage or pixel width to add. I know this is based on the values I put in the post but if you’re gonna design for instance a restaurant website like Im doing, how do you know you should make it 1100 or 1200 px max-width? For the sake of argument, is 70% the same as 1100px based on the link you provided? Is a 500px wide div within a 70% container within a 1100 max-width container relative to a 500 pixel width div within a 70% width container Im building a website, how should I know to make the width 70 or 80 or 95%? Is max-width always a pixel unit and width a percentage? I just see so many arbitrary measurements that I cant find a pattern or best rule of thumb. I guess I just want to know why a designer chooses what they choose. I just want to know the why behind designers choices
Im sorry I know all this sounds crazy
I’ve changed the text to 80% now.
No, it doesn’t sound crazy at all. I got confused by it first too, but everything became clear to me eventually.
The width in % is always relative to its parent element width. So, if the container width is 1200px and you apply 50% width to a child element, its width will be 50% of 1200px.
You’ll have to decide this when designing the website outside of Webflow. In Sketch, Figma, Photoshop or whatever app you want to use. You should have those measurements before starting a Webflow project.
Let’s break it down. The 500px div is not relative to anything, because px values are not relative and not responsive. The 70% width container is relative to the 1100px max-width container. If we convert it in pixels the width of the 70% container is 770px inside a 1100px container.
You are gonna have to calculate it every time based on the element’s parent width. You can use this to calculate %: https://percentagecalculator.net/. So, you can do it like this: 300 is what % of 1100, for which the answer is 27.27%. Now, if you use 27.27% width inside a 1100px container, you’ll get 300px.
Nope. Both max-width and width can have whatever value you want. There are even more values like em, vh, vw. But, let’s not jump into those right now.
I’ve updated my share link with a new example. Please take a look at it. And, tell me your email id associated with Webflow. I’ll transfer the project to you so you can play around with the values.
Thank you so much sir, appreciate all your help. I think Im going to have a couple drinks after all this
The updated site looks really nice, thank you once again