Question 291076 in Html Question posted in
Some basic documentation can be found here.

Html – In CSS why do we need the 'max-width" property when we have "vw" as a unit? eg: isn't "max-width: 80vw" same as "width: 80vw"?

In general if we assign a width to any element, won’t both the properties, ("max-width: 80vw" and "width: 80vw") behave the same way? And also what would be the possible use case of "max-width" property if the same problem can be solved simply by using ‘vw’ as a defining unit.

I’m trying to understand the basic concepts. Hope someone can explain.

Tags:

2

Answers


  1. 0

    The width attribute determines an element’s explicit width; for example, width: 80vw indicates that the element will occupy 80% of the viewport(simply visible area of a web page within a browser window.) width. However, max-width limits the maximum width that an element can have. For example, max-width: 80vw ensures that an element never goes over 80% of the viewport width, allowing responsiveness within that bound."

    Login or Signup to reply.
  2. 0

    While both max-width: 80vw and width: 80vw use the viewport width (vw) unit, they serve different purposes and have distinct effects on the layout.

    Using max-width is often beneficial for responsive design. It ensures that elements dono’t become too wide on larger screens, and it allows the layout to adapt gracefully to different screen sizes. In contrast, using only width without a max-width can lead to elements becoming too wide on larger screens, which might not be desirable for the overall design and user experience.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search