Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Muaaz Matwadia
.a{fill-rule:evenodd;}techdegree seal-36
Muaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 Points

Media Query

My grid media query is not wroking while my gallery one works Please help Thanks!

.main-header,
.nav{
    display: flex;
    flex-direction: column;
}

.site-logo{

   align-self: center;
}
.site-logo:hover{
    opacity: 0.8;
    transition: opacity .3s ease-in-out;
}
ul{
    list-style-type: none;
}
.nav{
    margin-top: 1.5em;
    list-style-type: none;

}

.nav a{
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    margin: 1.1em;
    font-weight: 600;
    font-size: 1.5em;
    border-bottom: 1px solid rgb(233, 90, 90);
}

.nav a:hover{

    transition: color .2s ease-in-out;
    border-bottom: 1px solid rgb(31, 184, 184);
}
a:visited{
    color: black;
}
body{
    font-size: 1em;
    font-family: 'Xanh Mono';

}

.home-bg {
    background: url(Images/background2.0.jpg) no-repeat center center fixed;
    }

.about-bg{
    text-align: center;
    font-size: 2em;
    margin: 0;
    padding: 50px;
    background: url(Images/pexels-pixabay-414660.jpg) no-repeat center bottom;
background-size: cover;
}


.contact{
    text-decoration: underline;
}
.help{
   display: block;
   font-weight: 500;

    margin: auto;
    padding: 10px;
    text-align: center;
}
h1{
    text-align: center;
    margin: 15px;
    padding: 10px;
    border-bottom:  2px solid rgb(223, 93, 93);
}
h4{
    text-decoration:underline ;

}

h2{
    font-family: 'Xanh Mono', monospace;
    /* color: rgb(233, 90, 90); */
    font-size: 2em;
    font-weight: 500px;
    text-align: center;

}
h3{ 
    font-family: 'Xanh Mono', monospace;
    /* color: rgb(233, 90, 90); */
    font-size: 1.8em;
    font-weight: 500px;
    margin: auto;
    /* position: absolute;
    left: 50%;
    top:70%;
    transform: translateX(-50%) translateY(-50%); */
    text-align: center;
}
footer{
    background-color: rgba(110,133,156,0.15);
    padding: 10px;
    margin: 5px 0 0 ;
}
.wrap{
    min-height: calc(100vh - 88px);
}

.moody{
    color: rgb(226, 101, 101);
}

.grid{
    max-width: 1000px ;
    margin: 45px auto;
     display: grid;
     grid-template-columns: 1fr  ;
     grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
     grid-gap: 10px;
    grid-template-areas: 
    "call"
    "message"
    "callcenter"
    "phone"
    "address"
    ;

 }


.phone{
    /* grid-column: 1/2;
    grid-row: 2/3; */
    grid-area: phone ;
   background-color: rgb(233, 90, 90);
}
.call{
    /* grid-column: 2/3;
    grid-row: 2/3; */
    grid-area: call ;
    background-color:rgb(233, 90, 90);
}

.message{
    /* grid-column: 3/4;
    grid-row: 2/3; */
    grid-area: message;
     background-color: rgb(233, 90, 90);
}

.address{
    /* grid-column: 4/5;
    grid-row: 2/3; */
    grid-area: address ;
    background-color: rgb(233, 90, 90);
}

.call-center{
    grid-area: callcenter ;
    background-color: rgb(233, 90, 90);
}


/* Grid contact  */

.grid > * {
    font-family: 'Xanh Mono', monospace;
    padding: 0.85em;
    text-align: center;
  }

/* Image Gallery */

.gallery{

    display: grid;
    grid-template-columns: 1fr ;
    max-width: 800px;
    grid-template-rows: .5fr .5fr ;
    grid-gap: 10px;
    margin: 45px auto;
    grid-template-areas: 
    "whiteroses redroses"
    "redroses"
    "sunflower"
    "lillies"
    "daisy"
    "carnartions"
    "special"
    "multi"
    ;
}
.gallery > * {
    font-family: 'Xanh Mono', monospace;
    padding: 0.85em;
    border: solid 4px rgba(110,133,156,0.15);
  }

.white_roses{

    grid-area: whiteroses;
}

.red_roses{

    grid-area: redroses;
}

.sunflower{ 

    grid-area: sunflower;
}
.lillies{ 

    grid-area: lillies;
}
    .daisy{ 

    grid-area: daisy;
}
.carnations{


     grid-area: carnations;
}

.multi{
    grid-area: multi;
}

.special{
    grid-area: special;
}

/* Media Queries */
@media(min-width: 768px){
    .main-header{flex-direction: row;
    }
    .site-logo{
        margin-right: auto;
    }
    .nav{
        margin-top: 3em;
      flex-direction: row;
      justify-content: space-between;
}
    h2{
        font-size: 3em;
        position: fixed;
    left: 50%;
    top:56%;
    transform: translateX(-50%) translateY(-50%);
}
  h3{  
    position:fixed;
    font-size: 2.5em;
    left: 50%;
    top:55%;
    transform: translateX(-50%) translateY(-50%);

}

}

 @media(min-width: 1025px){
    .main-header{flex-direction: row;
    }
    .site-logo{
        margin-right: auto;
    }
    .nav{
        margin-top: 0;
        align-self: center;
    }
    .nav li{
        margin-left: .65em;
        margin-right: .65em;
    }
   h2{ 
    font-size: 3em;   
    position: absolute;
     left: 50%;
    top:47%;
    transform: translateX(-50%) translateY(-50%);
   }
  h3{ 
      font-size: 2.5em;
      position: absolute;
     left: 50%;
        top:46%;
             transform: translateX(-50%) translateY(-50%);
  }

.gallery{
    display: grid;
    max-width: 2000px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "redroses whitesroses sunflower special" 
    "lillies daisy carnations multi";

}

.grid{
    max-width: 1000px ;
    margin: 45px auto; 
      display: grid; 
      grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr ; 
     grid-gap: 10px;
    grid-template-areas: 
    "call message callcenter"
     "phone address"
     ;

 }


/* flip cards flowers */

 .card{
    perspective: 700px;
    text-align: center;
    transition: transform 1s ease-in-out;
    transform-style: preserve-3d;

  }


  .card:hover{
   transform: rotateY(180deg);
  }

  .side-a,
  .side-b{
    backface-visibility: hidden;
    text-align: center;
  }

  .side-b{
    transform: rotateY(-180deg);
    color: black;
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px; 
    left: 10px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 18px;
  } 

}

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {
    .grid{

        margin: 45px auto;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-template-rows: 1fr 1fr;
         grid-gap: 10px;
        grid-template-areas: 
        "phone message call"
        "callcenter address"
         ;
}
  }
```CSS
```HTML
<!DOCTYPE html>
<html >
<head>
  <meta charset="utf-8">
  <title>Home Sweet Flower</title>
  <link href="style.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Xanh+Mono:ital@1&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/10145dfb4c.js" crossorigin="anonymous"></script>
</head>
<body>

    <header class="main-header">
      <a class="site-logo" href="index.html">
        <img src="Images/floral fushion.png" alt="flower logo">
      </a>

        <ul class="nav">
          <li><a href="flowers.html">Flowers</a></li>
          <li><a href="contact.html">Contact US</a></li>
          <li><a href="about.html">About US</a></li>
        </ul>


      </div>
</header>
<h1>Get in Touch</h1>
<div class="grid" >



<div class="phone">
      <img src="Images/mail.svg">
       <p>Drop us a line.</p>

<a href="mailto:example@gmail.com" >example@gmail.com</a>
    </div>

    <div class="message">
      <img src="Images/phone-call.svg">

      <p>Text us.</p>
      <p>011 234 5678</p>
    </div>

    <div class="call">
      <img src="Images/phone-call (1).svg">

      <p>Give us a call.</p>
      <p>011 234 5678</p>
    </div>

    <div class="call-center">
    <p>The call centre operating hours are from 08:00 to 17:00 on weekdays and 08:00 to 12:00 on Saturdays.</p>
  </div>

    <div class="address">
      <i class="fas fa-map-marker-alt fa-2x"></i>
<address>
  <h4>Address</h4>
<p>5th Avenue</p>
<p>Sandton</p>
<p>1825</p>
<p>South Africa</p>

</address>
 </div>
  <!-- closing grid -->
  </div>

  <footer>
    <p> &copy;Bella and Thorne, All Rights Reserved. No content on this site may be copied and reused in any form or fashion without express written permission.<a class="moody" href="www.moodybymuaaz.com"><b> By MOODY</b> </a></p>
   </footer>




</body>
</html>
```HTML
Blueocto Ltd
Blueocto Ltd
3,398 Points

Hi Azzie Fuzzie can you be a little more clearer what you expect to happen, and what you're actually seeing? I've copied your code, to a CodePen and put some outlines around your Grid at the different breakpoints ... can you explain what is right / wrong, so we can help?

Codepen