HTML/CSS @media

Question

Yo, I'm making an MOTD for a server for end-users to read. However, It looks so compressed for users with smaller monitors for example when the resolution is in 1280x1040 it's streched down. I'm not familiar with @media tags in CSS how am I going to make it so it looks better on smaller monitors?

Here is my code;

<DOCTYPE! html>
<html>
    <head>
        <title>MOTD</title>
        <style type="text/css">
            body {
                margin: 0px;
                padding: 0px;
                background: rgba(169,3,41,1);
                background: -moz-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
                background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(169,3,41,1)), color-stop(44%, rgba(143,2,34,1)), color-stop(100%, rgba(109,0,25,1)));
                background: -webkit-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
                background: -o-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
                background: -ms-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
                background: radial-gradient(ellipse at center, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019', GradientType=1 );
            }

            #border {
                background: #6d0019;
                margin-right: 500px;
                margin-left: 500px;
                -moz-box-sizing: content-box;
                -webkit-box-sizing: content-box;
                box-sizing: content-box;
                -webkit-border-radius: 150px 150px 150px 150px;
                border-radius: 150px 150px 150px 150px;
                -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
                -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
                box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
            }

            li {
                font-size: 25px;
                font-family: Impact;
            }

            h1 {
                font-size: 65px;
                font-family: Impact;
            }

            p {
                font-size: 25px;
                font-family: Impact;
            }

        </style>
    </head>
    <body>
        <br><br><br><br>
        <div id="border">
            <center>
                <br>
                <h1>Hello & Welcome :)</h3>
                <p>
                    Yo. This is a simple Trouble In Terrorist Town that is still under development<br>
                    Do us a favor and have fun and don't be an ass ;)
                </p>
                <br>
            </center>
        </div>
        <br><br>
        <div id="border">
            <center>
                <br>
                <h1>Rules:</h3>
                <li>Offensive Language Not Tolerented</li>
                <li>Sexism and Racism Result To Permenant Ban</li>
                <li>Respect and Obey Our Staff</li>
                <li>No RDM</li>
                <li>No Greifing</li>
                <br><br>
            </center>
        </div>
    </body>
</html>

You have `margin-left` and `margin-right` set to `500px`. This means that your content will have zero width if the screen is anything less than `1000px` wide. Consider using something like `width:90%; max-width:800px; margin:0 auto;` instead. — Niet the Dark Absol, Dec 09 '14 at 17:55
For this basic of an HTML file you shouldn't need to use media queries, especially since all of your users will be viewing this page from a desktop computer. Media queries are meant for pages that are going to be viewed on multiple devices(desktops, tablets, phones, etc.) Just use a percentage-based width and center the container with `margin: 0 auto;` as others have suggested. — user13286, Dec 09 '14 at 18:12

score 0 · Accepted Answer · answered Dec 09 '14 at 18:03

Try changing your #border div to have a width and margin:auto, this will ensure it is always in the middle of the device screen. See http://jsfiddle.net/richardblyth/f5roksrv/

#border {
  background: #6d0019;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-border-radius: 150px 150px 150px 150px;
  border-radius: 150px 150px 150px 150px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

  /* Altered */
  width: 92.1875%; /* = 1280 minus 1000 */
  margin-right: auto;
  margin-left: auto;
}

You might want to do something about the font sizes too (for smaller devices).

This works as well on all monitors I've tested this on. Thanks :) — Eiður Geir Vilhelmsson, Dec 09 '14 at 20:02

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

you should add @media in CSS like below

@media only screen and (min-device-width : 1024px) and (max-device-width : 1280px)
{
body {
      /*your custom CSS*/
}

#border {
      /*your custom CSS*/
}
...
}

by that code you can set a different CSS for monitors width between 1024px and 1280px.also,you can add more @media's to the css.

EDIT1:

also have a look at these links please

EDIT2:

Media Queries for Standard Devices

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

It was that simple! Thank you sir :) – Eiður Geir Vilhelmsson Dec 09 '14 at 19:40 — Eiður Geir Vilhelmsson, Dec 09 '14 at 19:40

score 0 · Answer 3 · answered Dec 09 '14 at 18:12

You can do it like this:

 @media screen and (max-width: 1024px){
  h1{font-size:44px} 
  #border{margin:0 400px;}
}

@media screen and (max-width: 1024px) is the resolution that you want the css to be applyed.You can change 1024 px with anything, like 480px, 768px, etc

HTML/CSS @media

3 Answers3