Can someone help me with the media queries problem?
I’m working on a schoolproject and I can’t get the media queries to work. I have looked on it for days, and I’m getting “crazy” soon. haha!
Can some of you guys look at it and help me?..
And now I cant post the “code”… why?
How can I show you guys my problem then?
You can post the code - just make sure you highlight the code before you post and click the </> button right above this editor space.
The right pane (to the right of the editor) is what the post will look like so make sure you see your code there before you post.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Blushop</title>
<style type="text/css">
#container #mainContent {
color: #00B8F1;
}
</style>
</head>
<body>
<div id="container">
<header id="mainHeader">
</header>
<section id="mainContent">
<div id="Container">
<div id="Header">
<center><font size="50" face="Times New Roman, Times, serif">BluShop</font>
</center></div>
<article><center><h6>World War Z</h6><img src="worldWarZ.jpg" width="211" height="273" alt="worldwarz" ></center>
</article>
<article><center><h6>Star Trek</h6><img src="starTrek.jpg" alt="startrek" width="211" height="273" align="bottom"></center></article>
<article><center><h6>Pacific Rim</h6><img src="pacificRim.jpg" width="211" height="273" align="bottom" alt="pacificrim">
</center></article>
</section>
</div>
</body>
</html>
<style type="text/css">
#container #mainContent {
color: #00FFFF;
}
body }
margin: auto;
}
#container{
width: 1024px;
height: 520px;
background-color: rgb(66, 69, 74);
overflow: auto;
}
#mainContent article{
width: 300px;
height: 360px;
background-color: rgb(230, 231, 232);
float: right;
margin: 50px 10px 15px 0px;
}
@media screen and (min-width: 1024px){
#container{
width: 50%;
background-color: rgb(66, 69, 74);
overflow: auto;
}
@media screen and (min-width: 1260px){
#mainContent article{
width: 300px;
height: 360px;
background-color: rgb(230, 231, 232);
float: right;
margin: 50px 10px 15px 0px;
}
#container #mainContent center {
color: #00B8F1;
}
#container #mainContent #Header center font {
font-size: 155px;
font-family: "Times New Roman", Times, serif;
font-weight: normal;
}
</style>
Why do I see a <style> tag near the end of your page?
Also this is school work? They honestly still teach <center>? Drop class and get your money back now. They are teaching you stuff from 10ish years ago.
Now, that being said, your page code should look more like this (note that you have two #container #mainContent{} sections and I kept both since I don’t know which one you want.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Blushop</title>
<style type="text/css">
#container #mainContent {
color: #00B8F1;
}
#container #mainContent {
color: #00FFFF;
}
body }
margin: auto;
}
#container{
width: 1024px;
height: 520px;
background-color: rgb(66, 69, 74);
overflow: auto;
}
#mainContent article{
width: 300px;
height: 360px;
background-color: rgb(230, 231, 232);
float: right;
margin: 50px 10px 15px 0px;
}
@media screen and (min-width: 1024px){
#container{
width: 50%;
background-color: rgb(66, 69, 74);
overflow: auto;
}
@media screen and (min-width: 1260px){
#mainContent article{
width: 300px;
height: 360px;
background-color: rgb(230, 231, 232);
float: right;
margin: 50px 10px 15px 0px;
}
#container #mainContent center {
color: #00B8F1;
}
#container #mainContent #Header center font {
font-size: 155px;
font-family: "Times New Roman", Times, serif;
font-weight: normal;
}
</style>
</head>
<body>
<div id="container">
<header id="mainHeader">
</header>
<section id="mainContent">
<div id="Container">
<div id="Header">
<center><font size="50" face="Times New Roman, Times, serif">BluShop</font>
</center></div>
<article><center><h6>World War Z</h6><img src="worldWarZ.jpg" width="211" height="273" alt="worldwarz" ></center>
</article>
<article><center><h6>Star Trek</h6><img src="starTrek.jpg" alt="startrek" width="211" height="273" align="bottom"></center></article>
<article><center><h6>Pacific Rim</h6><img src="pacificRim.jpg" width="211" height="273" align="bottom" alt="pacificrim">
</center></article>
</section>
</div>
</body>
</html>
If that’s not working for you (I only moved the style tags inside of <head>) then I don’t know what your issue is. You haven’t exactly said what your issue is besides you can’t get it to work.
Thank you.
I will see if it working now.
They haven’t said how I should do it. I have to figure it out by myself. Its so difficult! but yep! its so expensive so they should learn us something better. (43.000 NOK)
And may I ask? Which program do you use?
Program can mean very many different things.
Editor? Up until 6 months ago, Notepad. To not seem like a freak during my job interview, I said Notepad++. So they installed it on my computer and I sorta like it I guess. I’d be open to others. Not dead set on this editor.
Program as in schooling? Self-taught (minus the introductory course which started this path.)
Ohyes, thats true. Editor yes.
I use Visual Studio. But I dont like it, maybe I should try notepad++.
The media queries work I think. But why does the grey background go away when its get smaller?
Gray background where? I don’t have access to test. I assume it’s because of the media query 
.
Oh?
Why can’t you test?
do you have Dreamweaver?
I leave my house at 6:20AM to get to work at 7:00AM (time it is now).
I woke up at 5:45AM and got ready, spent a few minutes on threads here.
I will begin looking now that I’m not on my chromebook (reason #2 I couldn’t test.)
And no I do not have dreamweaver. That is garbage and I could not be paid to use it (just my opinion.)
The #container element only has the dark gray background when the screen width is 1024px or greater. Move that background outside of the media query.
Also note that in the code posted above the media queries are malformed and the closing bracket is missing. The body rule is also malformed with an incorrect starting bracket.
Always run your code through the w3c css validator before posting to weed out simple typos and errors.
The code editor in DW is excellent but the wysiwyg is pretty useless. It’s an expensive piece of kit if all you use it for is code editing though and its pretty rubbish on large files.
It’s caused me so much pain when trying to get people off of the design view, that I prefer not to use it based on my principals.
As far as the editor, it’s good, but there are better out there, and I was using Notepad until 6 months ago, grudgingly moved to Notepad++ (to not seem weird during a job interview). Editors do not matter to me. Then take points off for the hassle of design view, and it’s automatically ranked below every other editor in my eyes.
I had a meeting 2-3 weeks ago with a company. They used dreamweaver. I said in the meetingI think “it’s an abomination.”
Wasn’t too worried whether I’d get an offer from them or not. Didn’t care to be associated with them if they rely on it and use it (yes they use design view.)
So my code is totally wrong? 
You guys thinks maybe I’m totally stupid. Is it possible that one of you explain one more time? 
Count the brackets here and tell me if you spot a missing bracket .
@media screen and (min-width: 1024px){
#container{
width: 50%;
background-color: rgb(66, 69, 74);
overflow: auto;
}
@media screen and (min-width: 1260px){
As far as the “malformed body tag”, please look at this code and tell me what’s wrong with ti.
body }
margin: auto;
}
I cant see the missing bracket? confused
body }
margin: auto;
}
should this look like this maybe?
<body>
margin: auto;
}
(oh! Is it that early? 06.00 am?)
Look at the first media query. You begin a SECOND media query before the final bracket that closes the first. Count how many opener brackets you have for the first media queries {. Now count your closing brackets }.
It should be this:
body {
margin:auto;
}
Note the first bracket is the right way around unlike yours.
I would also suggest using this instead though.
html,body{
margin:0;
padding:0;
}
Okei. there is 3 opening and 1 closing bracket.
So it should look like this:
@media screen and (min-width: 1024px) {
#container
width: 50%;
overflow: auto;
}
@media screen and (min-width: 1260px) {
#mainContent article
width: 300px;
height: 360px;
float: right;
background-color:
margin: 50px 10px 15px 0px;
}
aha! I will try that.