CSS

Azzie Fuzzie
Azzie Fuzzie
6,537 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