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