Grow your CSS skills. Land your dream job.

How to make site width adjust to screen size

  • # March 22, 2013 at 3:32 pm

    Hi,

    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 http://mashable.com. 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

    @greenhoe

    .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 1400px..in 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.

*May or may not contain any actual "CSS" or "Tricks".