CODEWITHSUNDEEP
cssmedia-queries
Sally Slomzenski Milo
Sally Slomzenski Milo

Reputation: 65

Media queries not doing the job

I do have the viewport line in my code, btw. Below is my CSS - I suspect I've made an obvious error, but just am not seeing it! The text and images do flow into the expected one column, but the narrower divs remain narrow, the background image still shows, the images still full size. Please advise.

.cont { width:100%; max-width:1000px; position:relative; margin:0 auto; font-family:Arial, Helvetica, san serif; font-size:1em; text-align:left; }
.hdr { width:100%; max-width:1000px; position:relative; margin:0 auto; }
.row1 { width:100%; position:relative; background:url(https://myimagefiles.com/dinnerman/tbg.png); float:left;  }
.row1l { width:26%; position:relative; margin-left:2em; float:left;  }
.row1r { width:64%; position:relative; margin-left:2em; margin-right:2em; float:left;  }
.row2 { width: 94%; position:relative; text-align:left; margin:0 auto; }
.row3l { float:left; width: 45%; position:relative; text-align:left; margin:0 0 0 2em; }
.row3r { float:left; width: 45%; position:relative; text-align:left; margin:0 0 0 2em; }
.grntxt { color:#207815; }
.bott { width:100%; height:19px; )

@media only screen and (max-width: 750px) {
.cont { width:100%;  } 
}
@media only screen and (max-width: 750px) {
.hdr { width:94%;  } 
}
@media only screen and (max-width: 750px) {
.mimg { width:94%;  } 
}
@media only screen and (max-width: 750px) {
.row1 { width:94%; margin-left:.2em; margin-right:.2em; background-image:none;} 
}
@media only screen and (max-width: 750px) {
.row1l { width:94%; margin-left:.2em; margin-right:.2em; background-image:none;} 
}
@media only screen and (max-width: 750px) {
.row1r { width:94%; margin-left:.2em; margin-right:.2em; background-image:none;} 
}
@media only screen and (max-width: 750px) {
.row2 { width:94%; margin-left:.2em; margin-right:.2em; } 
}
@media only screen and (max-width: 750px) {
.row3l { width:94%; margin:0 auto; } 
}
@media only screen and (max-width: 750px) {
.row3r { width:94%; margin:0 auto; } 
}
@media only screen and (max-width: 750px) {
.bott { display:none;} 
}

Upvotes: 0

Views: 25

Answers (1)

Soviut
Soviut

Reputation: 91515

You have a typo

.bott { width:100%; height:19px; )

Should terminate with a } not a )

.bott { width:100%; height:19px; }

You should use a CSS linter (such as CSSLint) to make sure you're not making any typos. They can be run as separate tools, as part of your build chain (Grunt, Gulp, Webpack, etc.) or directly in any proper IDE (Sublime, Atom, etc.). There's also online versions like this one which I used to track down the errors in your code. They're good for quick checks like this, but not suitable for a real development workflow.

Additionally, you should really group your media queries

@media only screen and (max-width: 750px) {
  .cont { width:100%; } 
  .hdr { width:94%; } 
  .mimg { width:94%; } 
  ...
}

There's no need to have separate ones for each set of styles you're applying.

Upvotes: 1

Related Questions