Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Alina Gavrila
Alina Gavrila
Courses Plus Student 2,490 Points

Width: 45% vs Max-width:45%

Hello,

My question goes from this lesson: https://teamtreehouse.com/library/how-to-make-a-website/styling-web-pages-and-navigation/style-the-image-captions

I've tried to change #gallery li's Width: 45% to Max-width:45% and nothing has changed.

1) Could anyone explain why in this lesson Nick Pettit uses Width instead of Max-width?

2) Why I don't see any difference when using max-width?

<div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>
</div>


/****CSS****/
#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

img {
  max-width: 100%;
}

/**********************************
PAGE: PORTFOLIO
***********************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  max-width: 45%; /*******WIDTH VS MAX-WIDTH*******/
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7
}

2 Answers

Gianni Zamora
Gianni Zamora
9,547 Points

The reason to use max-width is for responsiveness purposes. If you say 45% width then that image will be 45% scaled up or down to whichever screen it is on. This may cause unexpected issues in terms of the layout and how your website will look. Using max-width 45% will mean that the image will never be above 45% of whichever div or space it is in.

You probably have an image in a div that is width:100%; that is why you can't see the difference, make a div that is width:50%; then use width: and max-width: 45% and you will see the difference.

Alina Gavrila
Alina Gavrila
Courses Plus Student 2,490 Points

I've edited the question and included my code there. I've made the div container width: 50% and everything still behaves the same... I have the same level of responsiveness using max-width and width. What should have changed?

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

width is the width of the browser of the screen.

max-width is the maximum width the screen can be for that element being it a div or image.

More info at css tricks. https://css-tricks.com/almanac/properties/m/max-width/