Re media query in code

Question

Re media query in code

108 views Asked by janice4906 At 08 June 2015 at 15:20

I have had to put all of the code here so you can see my question in context with this code for a basic website. The part of this code I'm referring to is the media query coded below as: @ media (max-width: 700px) body { background-color: #fff; } I've done some research on media queries as required and know that in this code that when the page is at width 700px or less it will become the color of #fff which I think is a white color. But what would be the purpose of putting the code here besides a teaching exercise? Is it so that it will fit a mobile phone if the web page where to be opened on such a device? I thought that instead of using a media query that the width of the webpage to fit a device like a mobile phone was established in the meta tags viewport description. Please bear in mind I'm a newbie and just starting to learn about coding about a month ago.

<!doctype html>
<html>
     <head>
 <title>Example Domain</title>
 <meta charset="utf-8" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <style type="text/css">
 body {
 background-color: #f0f0f2;
 margin: 0;
 padding: 0;
 font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sansserif;

 }
 div {
 width: 600px;
 margin: 5em auto;
 padding: 50px;
 background-color: #fff;
 border-radius: 1em;
 }
 a:link, a:visited {
 color: #38488f;
 text-decoration: none;
 }
 @media (max-width: 700px) 
 body {
 background-color: #fff;
 }
 div {
 width: auto;
 margin: 0 auto;
 border-radius: 0;
 padding: 1em;
 }
 }
 </style>
</head>
<body>
<div>
 <h1>Example Domain</h1>
 <p>This domain is established to be used for illustrative examples in
documents. You may use this
 domain in examples without prior coordination or asking for permission.</p>
 <p><a href="http://www.iana.org/domains/example">More information...    </a></p>
</div>

Original Q&A

There are 2 answers

**MiniRagnarok** · Answer 1 · 2015-06-08T15:27:27+00:00

It looks like your code is missing a bracket for the media query. I believe it should look like this. When the window is less than 700px the background is white. When greater than 700px it's a gray. Try re-sizing the window to see what I mean.

@media (max-width: 700px) {
    body {
        background-color: #fff;
    }
    div {
        width: auto;
        margin: 0 auto;
        border-radius: 0;
        padding: 1em;
    }
}

Snippet

body {
    background-color: #f0f0f2;
    margin: 0;
    padding: 0;
    font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sansserif;
}
div {
    width: 600px;
    margin: 5em auto;
    padding: 50px;
    background-color: #fff;
    border-radius: 1em;
}
a:link, a:visited {
    color: #38488f;
    text-decoration: none;
}
@media (max-width: 700px) {
    body {
        background-color: #fff;
    }
    div {
        width: auto;
        margin: 0 auto;
        border-radius: 0;
        padding: 1em;
    }
}

<div>
     <h1>Example Domain</h1>

    <p>This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.</p>
    <p><a href="http://www.iana.org/domains/example">More information...    </a>

    </p>
</div>

**Cagatay Ulubay** · Answer 2 · 2015-06-08T15:29:05+00:00

Look at following JSFiddle: http://jsfiddle.net/ep6mtoa7/ (Btw. there was a missing { after the Media Query that I inserted here)

@media (max-width: 700px) {
 body {
 background-color: #fff;
 }
 div {
 width: auto;
 margin: 0 auto;
 border-radius: 0;
 padding: 1em;
 }
}

If you increase the width of the box, you will see a grey background and in the middle will be a Box with rounded edges. If you decrease the width of the box, you will see that the grey background disappers and the box disappears too, but the white Background stays. The real need is because the box has a height, so only the box part would be white and the rest (top and bottom area) would still be grey.

Look at following JSFiddle: http://jsfiddle.net/ep6mtoa7/1/ (I removed the background-color: #fff)

You will see that the bottom part is still grey. If you put in the background-color part it will be white.

To your other question: The media query looks for device width, so mostly devices have a smaller width than your PC would have. The meta-tag part says something like if the zoom should kick in or if it's even allowed. So if you saying that your page should be 1024px wide, the phone would fit the page into a 1024px viewport and you don't have to zoom in/out as an user.

At this point I am not sure if it's smart to go so deep into it, maybe first learn the basics more and then go deeper. But I like the effort you putting in, also google and read read read read as much blogs and stackoverflow threads as you can, this is a must do and will improve you alot!

TechQA.

Re media query in code

There are 2 answers

Snippet

Related Questions in MEDIA

Popular Questions

Popular Tags

Trending Questions