Treehouse: Grow your CSS skills. Land your dream job.

How to make site width adjust to screen size

  • # March 22, 2013 at 3:32 pm


    I was wanted to make my blog’s site width large around 1400px, but adjust when people are viewing it on a lower resolution or as they adjust the browser width. A good example of this would be CSS-Tricks does this a little as well with adjusting the layout of the menu. I’m not sure if this can be done with only CSS.

    # March 22, 2013 at 3:33 pm


    .wrapper {
    width: 90%; //Or whatever number you desire, as long as it’s a percentage
    max-width: 1400px;

    looks like mashable uses 100%, where css-tricks uses 96%

    # March 22, 2013 at 3:43 pm

    Thank you Chris, What is the difference between using width% and min-widht?

    # March 22, 2013 at 3:55 pm

    you mean `max-width`? `max-width` defines the largest the wrapper can be, in your case, 1400px, where `width` defines the size, so 100% means fill the page, unless the page is larger than which case, it stops growing there.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.