Default site width



I’ll try to change to your suggestion as I tweak my code while working on this current issue.

That is what I meant. Up until recently, web pages had lots of whitespace, but now you see these never-ending scroll sites where all they have is full-width menus and pictures and even the content is much wider.

Squarespace or whatever has lots of those desigs.

I never really thought about this topic before, and now my mind (and eyes) are mixed up and I feel like I have lost my point of reference.

Personally I like tons of whitespace and minimalistic designs. My client’s sister from this summer made me feel like their website looked crappy and boring. Guess I have a diffferent perspective on what looks good?!

I am going to see if I can expand things out to 1280px just for consistency.

The only device I have is my MacBook at 1280x800…




You lost me here.

Are you saying that no one column should ever be more than 4 times as wide as the skinniest one?

And why are you adding up ratios? (That seems like convoluted math!) :smile:

In fairness and on second thought, I want a fixed width in my cases - I have a rotator/slider (?) and also 5 boxes of services and I don’t want them to be fluid. They are fluid in that when the parent collapses down on them too much, I change then from fixed-width to fluid like display:block and width:auto.

In general I can see where your advice makes sense, but on my home page, I think how I handle things makes more sense.

Not sure if you follow me without an example.

Just saying.

How familiar are you with the way grind layouts are built up? The first one I ever encountered was If you take a look at their demo page, you can see how the ratios build up (in this instance based around either 12 or 16 columns). Here, they show the numbers based on pixel widths, but I used the ratios between those and converted them to percentages for use on my blog. I got that fluid quite quickly from what was an absolutely a fixed width site - but as I’m yet to deal with the break points with @media queries, I’d make no claims about it being responsive, despite it passing Google’s “Mobile Friendly” test.

That resolution is needed if you are going to watch video as that’s the most common video resolution now in use - unless you need screens with 3840px width in order to watch 4k video.

Most people when they are using a computer also have more than one program running at a time. A 1920px width only allows for 2 by 960px windows to be visible at the same time.

No clue.

Looks like a more advanced topic to add to my responsive to-do list!

That should, of course, have said “grid layouts”

Yes , I was. 4:1 ration or even 5:1 ratio max was just an aesthetic rule, not a mathematical one. :slight_smile:

Is the correct way to do things, then for me to set my wrapper element to:

max-width: 1280px;
margin: 0 auto;

It will go no bigger than 1280px, but when the screen is less, it will take the default 100% width, unless you also state a width (which should be % to stay fluid, if you choose to set a width that is).
That is the basis of a fluid layout. You then only need add a query when something ‘breaks’ like the columns are too narrow or menu doesn’t fit.

1 Like


Please explain. Why is using pixels bad?

A lot for my brain as I learn “trial-by-fire”.

So I set wrapper to

max-width: 1280px
margin: 0 auto;

and my outside wrapper handles everything over 1280 pixels by having a fixed-with design with expanding gutters, right?

Then under 1280px, I can use media queries to mix things up, like switching from display:table to display:block for smaller screens, right?


How about this simple example…

<!doctype html>
<html lang="en">
            min-height: 100px;
            max-width: 1000px;
            margin: 0 auto;
            font-size: 2em;
            font-weight: bold;
            text-align: center;
            background-color: #CCFFCC;

    <!-- Page Wrapper -->
    <div id="wrapper">
        I am 1000 pixels wide, but no more!


If someone whose eyesight isn’t perfect does a 1000% zoom on your page in order to be able to see the text on your page then the text that will fit in 1280px is only 1/10th of what you intended.

If you specify the max-width in em instead then the maximum width will increase when the text is zoomed.instead of trying to fit a lot less text across the screen.

I think @ronpat mentioned this a couple of months ago.

Right now I have a stripped down version of my home page with just the masthead and a separate wrapper with some text in it. I did a test using…

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
/*    max-width: 75rem;        /**/
    max-width: 1200px;        /**/
    margin: 0 auto;
    border-collapse: collapse;                    /* Allows border. (Collapses margins/padding.) */
    font-size: 0.9rem;
    line-height: 1.1;

    position: relative;
    top: 120px;                                                    /* Position wrapper below masthead. */
/*    max-width: 75rem;        /**/
    max-width: 1200px;                                                /* Provide full-width container. */
    margin: 0 auto;
    background-color: #CCFFCC;

I tried zooming in on both as far as FireFox would go, but didn’t see any difference. Sorry if I’m be dense!

Is this the post/thread that you are thinking about?

Unordered List as boxes? - #18 by mikey_w

If so, that was a very specific use of ems for container dimensions because you specified in bold that you wanted the boxes to remain square if the user changed his font size. It wasn’t a full page width thing, though.

Yep, that was likely it.

So what do you say about @felgall suggestion?

First off, I don’t see the difference between the two when I zoomed.

Secondly, it sounds like you think his idea is not so great in this instance?

I didn’t read a suggestion into @felgall’s last post.

No, I’m not disagreeing with @felgall. He is using a conceptual example to make a point about page design.

I don’t understand what @felgall is talking about in post #34. I could not create the effect he mentions.

Is the page available online? If you can post a link to it I’ll see if I can get a screenshot of what it looks like when zoomed.

1 Like