Can someone solve why my media query is not taking affect.

Question

Hey, this is my first attempt at a website and although i thought i understood media queries pretty well, for some reason any media query attempt i make in my atom text editor with this html/css combo or any other file seems to not work. i have even done a test with another simple html which still did not work. Can someone solve it please?

I was hoping the css code below will change my css grid from a 2 column layout on a desktop, to a 1 column layout on screens less than 1440px wide and 900px high. but nothing happens.

some parts from the css have been omitted as it was fairly long.

/* fix for top margin ---------------------------------------*/
html, body {
  margin: 0;
  padding: 0;
}

/* Nav bar ---------------------------------------*/
Nav {
  font-family: 'raleway';
  font-weight: 400;
  letter-spacing: 1.5;
  background-color: #1f2122;
  word-spacing: 5rem;
  padding: 1.2rem 0 1.2rem 0;
  margin: 0rem;
  width: 100%;
  text-align: center;
  position: fixed;
  z-index: +1;
 }

nav a {
  font-size: 1.3rem;
  border: solid transparent 1px;
  padding: 0.6rem;
  margin: 0.2rem;
  border-radius: 25px;
  margin: 0;
}

/* grid stuff ------------------------------------------*/

body {
  background-color: #7c8491;
}
.grid {
  background-color: #575c63;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 2rem;
  padding: 10rem 10rem 5rem 10rem;
  grid-template-areas:
  "ceiling ceilingimg"
  "lightingimg lighting"
  "mezfloor mezfloorimg"
  "furnitureimg furniture"
  "deco decoimg"
  "washroomimg washroom"
  "carpet carpetimg"
  "summary summary";
}

/*  classes to grid areas ---------------*/

.ceiling {
  grid-area: ceiling;
}
.ceilingimg {
  grid-area: ceilingimg;
}
.lightingimg {
  grid-area: lightingimg;
}
.lighting {
  grid-area: lighting;
}
.mezfloor {
  grid-area: mezfloor;
}
.mezfloorimg {
  grid-area: mezfloorimg;
}
.furnitureimg {
  grid-area: furnitureimg;
}
.furniture {
  grid-area: furniture;
}
.deco {
  grid-area: deco;
}
.decoimg {
  grid-area: decoimg;
}
.washroomimg {
  grid-area:washroomimg;
}
.washroom {
  grid-area: washroom;
}
.carpet {
  grid-area: carpet;
}
.carpetimg {
  grid-area: carpetimg;
}
.summary {
  grid-area: summary;
  text-align: center;
  padding-top: 2rem;
}

/* .grid content -------------------*/

.grid div img {
  width: 100%;
  height: auto;
}

.grid .left {
  text-align: left;
}

.grid .right {
  text-align: right;
}

.grid h1 {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.8rem;
  color: #d7e1e5;
  border-bottom: #d7e1e5 solid 0.2rem;
  padding-bottom: 1rem;
}

.grid p, .grid ul li {
  font-family: 'raleway';
  font-size: 1rem;
  line-height: 1.2;
  color: #d7e1e5;
}

.grid ul {
  list-style-type: none;
  padding: 0;
}
/* Footer ---------------------------------------*/
footer {
font-family: 'raleway';
font-size: 2rem;
font-weight: 400;
letter-spacing: 1.5;
background-color: #1f2122;
word-spacing: 2rem;
padding: 1.2rem 0 1.2rem 0;
margin: 0rem;
width: 100%;
text-align: center;
}

footer li {
color: #d7e1e5;
display: inline-block;
list-style-type: none;
word-spacing: 0;
}

/* Media Queries - Screen compatability ---------------------------------------*/
/* ALL ABOVE CODE IS DESKTOP WITH SCREENS ABOVES 1440px x 900px*/

/*small screen display - 1440 x 900 max*/

@media screen (max-width: 1440px) and (max-height: 900px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    justify-content: space-around;
    grid-template-areas:
    "ceilingimg"
    "ceiling"
    "lightingimg"
    "lighting"
    "mezfloorimg"
    "mezfloor"
    "furnitureimg"
    "furniture"
    "decoimg"
    "deco"
    "washroomimg"
    "washroom"
    "carpetimg"
    "carpet"
    "summary";
  }
}

Thanks guys

Answer 1 · 2017-09-17T19:24:25Z

September 17, 2017 7:24pm

Okay Lee, just a small thing...

@media screen (max-width: 1440px) and (max-height: 900px)

Should have an "and" after screen, like this:

@media screen and (max-width: 1440px) and (max-height: 900px)

That'll get the media query working correctly. I will say you might end up having some issues though with the query being so restrictive. With that query, since you're checking both height and width the screen would have to be equal to or smaller than 1440px x 900 for this to execute. While max-height can sometimes be useful, you might want to think about ways to accommodate your UI without the need for the height query and just use width so it's not so restrictive (for your own management of it later on). Just my two-cents on that one :).

Answer 2 · 2017-09-17T18:52:40Z

September 17, 2017 6:52pm

Hi Lee, can you share your full markup for this too so I can test it?

Answer 3 · 2017-09-17T19:39:01Z

September 17, 2017 7:39pm

Thanks for your help Tim, cant believe i overlooked that.

your input is appreciated, i just want to play around with some different queries and see what happens, its just a project for practice as its my first go.

thanks again

Welcome to the Treehouse Community

Looking to learn something new?

Lee Hayward

Lee Hayward

Can someone solve why my media query is not taking affect.

3 Answers

Tim Knight

Tim Knight

Tim Knight

Tim Knight

Lee Hayward

Lee Hayward

Lee Hayward

Lee Hayward

Tim Knight

Tim Knight