Why some people put max width and width at the same time?

Hi, guys!

I have been watching a tutorial on webflow, confused with why the tutor put max with : 1440px and width 100%?

Anyone who could explain this topic…?

Appreciate with your help in advance!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Try it. Setup different scenarios, publish, and see how browsers render it.

There are several reasons designers use both together, but the main reason is usually to stipulate a layout constraint.

If you have a DIV with width 300px, but the contents are 400px wide, the DIV will expand to fit those contents ( unless hidden or auto overflow is also set ). Max width acts as a maximum, so if you have max-width 350px, then the DIV will be 300px with contents that fit, and no larger than 350px when the contents are wider than 300px.

Designers often use different units as well, particularly on larger layouts, e.g. width 100%, but max-width 1800px. Keeps layouts from getting ridiculous when the content doesn’t scale.

Hey, Michael!

You are so sweet and kind :slight_smile:

Thank you for your reply !

I am made a lot of sense thanks!