Disorganized CSS position on large screens

Question

I created a control panel for Streaming. In my resulução 1366 x 768, It opens perfectly, on large screens, it opens totally disorganized. Does anyone know if there is possibility to lock the position of the CSS so that it is not "automatic adjustment" on larger screen?

Help! My CSS code: http://creativestreaming.com.br/admin/inc/6.css

Thanks!

the problem will be because as the width increases, the content will start stacking side by side. you can prevent this by using a fixed width layout `#container {width:1200px, margin:0 auto;}`. I would generally use a `max-width` and `min-width` instead of `width` so that the content can resize a little, just not too much — wf4, Dec 23 '13 at 11:39
Thanks! How can I use the #container {width:1200px, margin:0 auto;}? Where do I add? I'm a beginner in web rs — Cassiano José, Dec 23 '13 at 11:45
I'll add an answer for you and will include an example for you there. — wf4, Dec 23 '13 at 11:48

score 0 · Accepted Answer · answered Dec 23 '13 at 11:52

if you add a container to your page, it will stop the content from getting too wide. Here is an example:

HTML:

<body>
    <div id="container">
        <!-- rest of markup here -->
    </div>
</body>

CSS:

#container {
    max-width:1450px;
    min-width:980px;
    /*width:1200px;*/
    margin: 0 auto; 
}

I have set a max and min, you could just set width instead - its up to you.

score 0 · Answer 2 · edited May 23 '17 at 10:32

based on browser-width, a standard approach, to lock the css is to use media queries

Check this link about general breakpoint for m.q

There are multiple thread on this too : Media Queries: How to target desktop, tablet and mobile? | Which are the most important media queries to use in creating mobile responsive design?

You can just target a specific browser width and lock your css there-on!

Disorganized CSS position on large screens

2 Answers2