Originally I have my text as white. When changing the browser's width to smaller than 500px, I want the text to turn blue. I've tried multiple ways and landed on this, which is not working. Any help would be appreciated. The media query is at the very bottom. I'm not sure if it has to do with overriding somewhere, which I can't imagine being the case since the media query is placed at the very bottom of the css file.
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: white;
font-family: 'Montserrat', sans-serif;
}
h1 {
font-size: 2.5rem;
font-family: 'Lobster', sans-serif;
font-weight: lighter;
}
h2 {
font-size: 8rem;
font-family: 'Lobster', sans-serif;
font-weight: lighter;
}
h3 {
font-size: 3.5rem;
font-family: 'Lobster', sans-serif;
font-weight: lighter;
}
h4 {
font-size: 3rem;
}
p {
font-size: 2.5rem;
}
li {
font-size: 2rem;
}
a {
color: white;
}
.home {
background: radial-gradient(#5c523d, #131313);
}
.nav-container {
background: #070707;
}
nav {
width: 80%;
margin: auto;
min-height: 10vh;
padding: 3rem 0rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
nav a {
text-decoration: none;
}
nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
list-style: none;
}
nav #logo {
-webkit-box-flex: 1.5;
-ms-flex: 1.5;
flex: 1.5;
position: relative;
}
nav #logo::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 16rem;
height: 6rem;
background: #5c523d;
border-radius: 50%;
-webkit-transform: translate(-10%, -20%);
transform: translate(-10%, -20%);
mix-blend-mode: screen;
}
nav .order {
background: #5c523d;
padding: 1rem 2rem;
border-radius: 2rem;
}
nav .prices {
background: #5c523d;
padding: 1rem 2rem;
border-radius: 2rem;
}
nav .about {
background: #5c523d;
padding: 1rem 2rem;
border-radius: 2rem;
}
.showcase {
display: -ms-grid;
display: grid;
min-height: 90vh;
-ms-grid-columns: 10% (minmax(5rem, 1fr))[3] 10%;
grid-template-columns: 10% repeat(3, minmax(5rem, 1fr)) 10%;
-ms-grid-rows: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
.showcase h2 {
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-column: 2/3;
-ms-flex-item-align: end;
align-self: flex-end;
font-size: 6rem;
}
.about .pic {
height: 50vh;
width: 65vh;
margin-bottom: 40px;
border-radius: 20%;
}
.rev-section {
margin: auto;
padding: 0 1rem;
max-width: 1100px;
text-align: center;
}
.review-container {
background: #323232;
height: 100vh;
}
.review-container #intro {
font-size: 2.5rem;
font-family: 'Lobster', sans-serif;
font-weight: lighter;
width: 80%;
}
.review .review-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
/* align horizontal */
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/*# sourceMappingURL=style.css.map */
@media (max-width: 500px) {
body {
color: blue;
}
}
The following is my html:
<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://js.stripe.com/v3/"></script>
<script src="pay.js" type="text/javascript" defer></script>
<script src="review.js" type="text/javascript" defer></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/44f557ccce.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<!-- font-family: 'Lobster', cursive; -->
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:ital@1&display=swap" rel="stylesheet">
<!-- font-family: 'Lobster', cursive;
font-family: 'Montserrat', sans-serif;-->
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Math Website</title>
<body>
<main>
<div class="nav-container">
<nav>
<h1 id="logo">Simple Math!</h1>
<ul>
<li><a class="about" href="#">Home</a></li>
<li><a class="prices" href="#features-scroll">Schedule Appt</a></li>
<li><a class="order" href="#about-scroll">About Me</a></li>
</ul>
</nav>
</div>
<section class="home">
<div class="showcase">
<h2>Simple Math</h2>
<img src="roman-mager-5mZ_M06Fc9g-unsplash.jpg" style="height:520px;width:520px" alt="">
<div class="info">
<h3 class="language">The only universal language</h3>
</div>
</div>
</section>
<div class="features-container">
<div id="features-scroll"></div>
<section class="features">
<h2>Book Appt</h2>
<p>
So how does this work? Just submit your payment down below to schedule
your session with me!
</p>
<form id="payment-form" class="sr-payment-form">
<div class="sr-combo-inputs-row">
<div class="sr-input sr-card-element" id="card-element"></div>
</div>
<div class="sr-field-error" id="card-errors" role="alert"></div>
<button id="submit">
<div class="spinner hidden" id="spinner"></div>
<span id="button-text">Pay</span><span id="order-amount"></span>
</button>
</form>
</section>
<section></section>
</div>
<div id="about-scroll"></div>
<div class="about-container">
<section class="about">
<div class="about-logo">
<h2>About me</h2>
</div>
<div class="about-content">
<img class="pic" src="texas.JPG" alt="">
<p id="intro">
Hey guys thanks for checking out my site! So what separates me from other tutors? Well it's my patience
and ability to explain things the way I wish someone could've explained math to me when I was in school.. like a
Kindergardner! During our 1 hour sessions, we'll go through problem by problem, exploring each step of the solution
in depth, and throughly answering any of your questions along the way!
</p>
</div>
</section>
</div>
<div id="review-scroll"></div>
<div class="review-container">
<section class="review">
<div class="review-header">
<h2>Reviews</h2>
</div>
<div class="review-content">
<h2 class="title">Our guests love us</h2>
<p class="note">
lorem ipsum dolor sit amet consectetur adipscing elit. Nihil lbaorisam possimus preferendis non error neque
</p>
<div class="reviews">
<div class="review_two">
<div class="head-review">
<img src="youtube.png" width="100px" height="100px">
</div>
<div class="body-review">
<div class="name-review">
Jorge V
</div>
<div class="place-review">
San Diego
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="review_two">
<div class="head-review">
<img src="youtube.png" width="100px" height="100px">
</div>
<div class="body-review">
<div class="name-review">
Jorge V
</div>
<div class="place-review">
San Diego
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="review_two">
<div class="head-review">
<img src="youtube.png" width="100px" height="100px">
</div>
<div class="body-review">
<div class="name-review">
Jorge V
</div>
<div class="place-review">
San Diego
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="submit_review">
<h5>Like to submit a review? Please fill this out to recieve a code. Then use this code
to submit the review!
</h5>
<div class="input_form">
<form id="review_form">
<input type="text" label="phone number">
<input id="submit" type="submit">
</form>
</div>
<div>
Submit Review and Photo here!
</div>
</div> -->
</section>
</div>
</main>
</body>
</head>
</html>
