Set max width of website then center this material if browser is bigger than set width

Question

My website is responsive up to 1800px which is the max-width I want. Say the user's screen is bigger than 1800px, I want all of my html/css to stay the same that it was for the 1800px, just be centered on the page (if the user's current with is 2200, then there would be 200px of whitespace on the left, then the 1800px in the center, and 200px of whitespace on the right).

My code is the following:

<body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">navbar text</div>
    </nav>

    <!-- HOME -->
    <div id="home" class="content-section">
        <div class="container"></div>
    </div>

    <!-- ABOUT -->
    <div id="about" class="content-section">
        <div class="container"></div>
    </div>

    <!-- CONTACT -->
    <div id="contact" class="content-section">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 "></div>
            </div>
        </div>
    </div>

    <footer> footer text</footer>
</body>

score 0 · Answer 1 · answered Jul 09 '17 at 19:16

0

Wrap your code with <div class="wrapper"></div>

Here is css:

.wrapper{
 width:auto;
max-width:1800;
margin:0 auto;
}

Chk if this works

answered Jul 09 '17 at 19:16

Anil wagh

273
1
14

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

this is what i usually do (i develop websites up to 4k resoultion, but they are locked to 1920px and then they are centered (just like you want)

I set html & body width and height to 100%, then i set the body max width to 1940px and i apply a padding left and right of 10 px so that it is bordered nicely.

This is the code i usually use:

html, body{
 display:block;
 width: 100%;
 height: 100%;
 position:relative;
}

body{
 max-width:1940px;
 padding-left:10px;
 padding-right:10px;
}

and you obtain something like this:

You don't have to border it (the white gap before the light gray color is the border i'm talking about) but that's my preference.

Set max width of website then center this material if browser is bigger than set width

2 Answers2