I have no idea why my media query isn’t working. I’m just trying to test it at the moment by turning .topHeader green at 768px wide. Here’s my code.
(SOLVED) Just incase anyone else has a problem with @media query not having an effect in Chrome dev tools. Instead of
I used
which is now working.
html
www.waterproofed.com<header>
<div class="topHeader">
<div class="phone">
<p>Ph: 0497 660 008</p>
</div>
<div class="email">
<p>email: michaelanthony@gmail.com</p>
</div>
</div>
<div class="header">
<h1 class="title">Waterproofed</h1>
</div>
<div class="navBar">
<ul>
<li>Home</li>
<li>About us</li>
<li>Waterproofing systems</li>
<li>Contact</li>
</ul>
</div>
</header>
<div class="mainSection">
<img class="image" src="img/TorchOnMembrane.jpg" alt="Tourch on Waterproofing">
<div class="centered">Tourch-on membrane
</div>
<input type="button" name="rollon" value="Learn more" class="button">
</div>
<div class="ourServicesh1">
<h2>Our services</h2>
</div>
<div class="container">
<div class="flex1">
<div class="section1">
<h4 class="ourServicesh4">Torch-on membraine</h4>
<ul class="ourServicesul">
<li>Last 20 years</li>
<li>Highly durable</li>
<li>UV resistant</li>
<li>Great for commercial works</li>
</ul>
</div>
<div class="section2">
<h4 class="ourServicesh4">Polyurethane</h4>
<ul class="ourServicesul">
<li>Dynamic product</li>
<li>10 year warrenty</li>
<li>Liquid application</li>
<li>Easy repair</li>
</ul>
</div>
</div>
<div class="flex2">
<div class="section3">
<h4 class="ourServicesh4">Volclay</h4>
<ul class="ourServicesul">
<li>Great under water table</li>
<li>Quick application</li>
<li>25 year warrenty</li>
<li>No chemicals</li>
</ul>
</div>
<div class="section4">
<h4 class="ourServicesh4">Peal and stick</h4>
<ul class="ourServicesul">
<li>Easy to use</li>
<li>Inexpensive</li>
<li>Best suited vertical jobs</li>
<li>Quick application</li>
</ul>
</div>
</div>
<div class="flex3">
<div class="section5">
<h4 class="ourServicesh4">Epoxy</h4>
<ul class="ourServicesul">
<li>Highly durable</li>
<li>Liquid application</li>
<li>Heat and cold resistant</li>
<li class="bottom">Lifetime warrenty</li>
</ul>
</div>
<div class="section6">
<h4 class="ourServicesh4">Corking</h4>
<ul class="ourServicesul">
<li>Polyurethane based</li>
<li>non-toxic</li>
<li>Tube application</li>
</ul>
</div>
</div>
</div>
css
- {
margin: 0;
padding: 0;
font-family: ‘Roboto’, sans-serif;
}
p {
margin: 0;
padding: 0;
}
/=================================================== header =================/
/=================== phone/email ==================/
.topHeader {
width: 100%;
background-color: #0080ff;
height: 40px;
}
.phone {
display: flex;
justify-content: center;
}
.phone p {
color: white;
}
.email {
display: flex;
justify-content: center;
}
.email p {
color: white;
}
/=================== Main heading ==================/
header {
width: 100%;
position: fixed;
z-index: 1;
}
.header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 60px;
background-color: white;
border-bottom: 1px solid #004d99;
}
.title {
font-family: ‘Staatliches’, cursive;
color: #0080ff;
font-size: 2.8em;
padding-left: 10px;
}
/======================= navbar ======================/
.navBar {
width: 100%;
background-color: #0080ff;
display: flex;
justify-content: space-around;
border-left: 1px solid #004d99;
border-bottom: 1px solid #004d99;
}
.navBar ul {
list-style: none;
}
.navBar ul li {
width: 100%;
display: inline;
color: white;
border-right: 1px solid #004d99;
}
/=========================== main section ===============================/
.mainSection {
}
.image {
width: 100%;
height: 400px;
border-bottom: 10px solid #0080ff;
}
.centered {
width: 100%;
text-align: center;
position: relative;
bottom: 130px;
color: white;
font-size: 1.3em;
word-spacing:
}
.button {
padding: 15px 30px 15px 30px;
background-color: white;
border-radius: 20px;
cursor: pointer;
position: relative;
left: 50%;
bottom: 90px;
transform: translate(-50%, -50%);
font-size: 1em;
}
.button:hover {
animation-name: background-color;
animation-duration: 500ms;
animation-fill-mode: forwards;
}
@keyframes background-color {
100% {
background-color: #0080ff;
}
}
/=========================== our services ===============================/
.ourServicesh1 {
width: 100%;
text-align: center;
padding-bottom: 40px;
color: #0080ff;
}
.flex1 {
width: 100%;
display: flex;
justify-content: space-between;
}
.flex2 {
width: 100%;
display: flex;
justify-content: space-between;
}
.flex3 {
width: 100%;
display: flex;
justify-content: space-between;
}
.ourServicesh4 {
width: 180px;
text-align: center;
color: #0080ff;
padding-bottom: 10px;
padding-top: 10px;
}
.ourServicesul {
list-style: none;
width: 180px;
text-align: center;
}
.bottom {
padding-bottom: 20px;
}
</=================== ipad screen w:768px ==========================/>
@media only screen and (min-width 768px) {
.topHeader {
display: flex;
justify-content: evenly;
background-color: green;
}
}
