The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

    This reply has been reported for inappropriate content.


    .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

    This reply has been reported for inappropriate content.

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed