There seems to be a missing link in my understanding of making responsive websites. I'm using CSS media query to make navbar responsive when screen size changes.
When I reduce the size of the chrome window, the navbar changes from row to column as I want, but when I click the toggle device button in the inspector to change to mobile, everything goes back to row and it's not responsive anymore. I thought setting the CSS rules to change the layout on screen size change would account for mobile. What am I missing?
This is what it looks like full size
This is what it looks like with chrome reduced
This is what it looks like on mobile
codepen: https://codepen.io/PrinceCorwin/pen/QWKdjZq
My CSS:
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#navbar {
background-color: transparent;
width: 100%;
display: flex;
justify-content: space-around;
position: fixed;
top: 0;
}
#welcome-section {
background-image: url("https://bridgetales.com/wp-content/uploads/2020/12/gallery-background.png");
height: 100vh;
background-size: cover;
}
#navbar a {
color: white;
text-decoration: none;
padding: 7px;
margin: 20px;
border: 2px solid #0ae1e9;
border-radius: 25px;
cursor: pointer;
}
#welcome-text {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-top: 10%;
}
#welcome-head {
font-family: "Bubbler One", sans-serif;
font-size: 58px;
color: #0ae1e9;
}
#welcome-greet {
color: white;
position: relative;
font-family: "Bubbler One", sans-serif;
font-size: 40px;
}
@media only screen and (max-width: 575px) {
#welcome-head {
font-size: 35px;
}
#welcome-greet {
font-size: 25px;
}
#navbar a {
font-size: 0.7em;
}
#navbar {
flex-direction: column;
align-items: center;
justify-content: center;
}
#welcome-text {
padding-top: 50%;
}
}
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>The Gallery - Steve Amalfitano</title>
<link rel="stylesheet" href="./style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Bubbler+One&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main>
<nav id="navbar">
<a href="">WEB APPS</a>
<a href="">WOODWORKING</a>
<a href="webdev.html">WEB DESIGN</a>
</nav>
<div id="welcome-section">
<div id="welcome-text">
<div id="welcome-head">STEVE CORWIN AMALFITANO</div>
<div id="welcome-greet">THE GALLERY</div>
</div>
</div>
</main>
</body>
</html>