We Keep Coding

Text being unresponsive. How to resolve?

I am Currently having trouble making my website responsive. To explain clearly the problem, Currently, the website is following the width of the tab, however, the problem arises that the text does not follow along and it overlays the images placed in the boxes.
Help would be greatly appreciated!
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600&display=swap");
*{
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav{
background: #1b1b1b;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
color: white;
font-size: 27px;
line-height: 70px;
padding-left: 60px;
}
nav ul{
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li{
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a{
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: cyan;
}
nav ul ul li a:hover{
color: cyan;
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
.background{
background-color: #212529;
width: 100%;
height: 200px;
position: relative;
}
.overlay{
width: 100%;
height: 100%;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
left: -30%;
}
.overlay h3{
margin-bottom: 20px;
color: crimson;
font-size: 20px;
}
.overlay p{
font-size: 35px;
}
.main h1{
display: flex;
text-align: center;
justify-content: center;
margin-top: 20px;
font-size: 50px;
}
.text{
width: 50%;
height: 50px;
padding-top: 20px;
white-space: initial;
margin: 0 auto;
word-wrap: break-word;
}
body{
margin: 0;
font-family: sans-serif;
}
.section{
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section img{
height: 250px;
}
.section h1{
margin-left: 100px;
color: black;
}
.section p{
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.section2{
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: right;
}
.section2 img{
height: 250px;
}
.section2 h1{
margin-left: 100px;
color: black;
}
.section2 p{
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.section2 sup{
font-size: 10px;
opacity: 0.5;
}
.section3{
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section3 img{
height: 250px;
}
.section3 h1{
margin-left: 100px;
color: black;
}
.section3 sup{
font-size: 10px;
opacity: 0.5;
}
.section3 p{
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.section4{
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: right;
}
.section4 img{
height: 250px;
}
.section4 h1{
margin-left: 100px;
color: black;
}
.section4 p{
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.footer{
background-color: #000;
padding: 40px;
clear: both;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color:#4b4c4d;
}
.footer .social a{
display: inline-block;
height: 40px;
width: 40px;
background: #424242;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color:#ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover{
color:#24262b;
background-color: #ffffff;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a{
color:#fff;
text-decoration: none;
}
.footer ul li{
display: inline-block;
padding: 0 15px;
}
.footer .copyright{
margin-top: 15px;
text-align: center;
font-size: 20px;
color:#fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../CSSFolder/Class2.css">
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>Classes</li>
<li>Products</li>
<li>Login</li>
<li>Feedback</li>
</div>
</ul>
</nav>
<div class="background">
<div class="overlay">
<h3>Classes</h3>
<p>Insert Something Here...</p>
</div>
</div>
<div class="main">
<h1>Classes, coaches and community</h1>
<div class="text">
<p>At Virgin Active, we do health and fitness differently.
We have expertly crafted exercise experiences that are the perfect blend of intelligent programming and feel-good movement.
We've got everything from Yoga to HIIT, so you can move your body any way you want.
</p>
</div>
</div>
<div class="section">
<img src="../ImageFolder/Yoga.jpg" alt="Yoga">
<div class="ClassText">
<h1>Yoga</h1>
<p>
Choose from Classes with dynamism,energy and athleticism, to an authentic and peaceful experience.
<br><br>
Classes include: Align,Flow,Calm,SkyPark Yoga
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
<div class="section2">
<div class="ClassText">
<h1>Cycle</h1>
<p>
Custom designed bikes, choreographed lighting and fresh daily beats to inspire you for every ride
<br><br>
Classes include: Cycle Spirit, Cycle Burn, RPM<sup>TM</sup>, THE TRIP<sup>TM</sup>
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
<img src="../ImageFolder/Cycle.jpg" alt="Cycle">
</div>
<div class="section3">
<img src="../ImageFolder/Les.jpg" alt="Les">
<div class="ClassText">
<h1>Les Mils<sup>TM</sup></h1>
<p>
Mixing the hottest music with cutting edge-exercise science, motivation and the
energy of many, Les Mills<sup>TM</sup> group fitness classes make you fall in love with fitness
Discover our range of world-class group fitness workouts below.
<br><br>
Classes include: BodyPump<sup>TM</sup>,BodyCombat<sup>TM</sup>,THETRIP<sup>TM</sup>
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
<div class="section4">
<div class="ClassText">
<h1>Reformer Pilates</h1>
<p>
Hundreds of Reformer classes on offer from morning to night.
<br><br>
Classes include: Beginner,Intermediate
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
<img src="../ImageFolder/Reformer.jpg" alt="Reformer">
</div>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>About Us</li>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
<p class="copyright">
<small>©2022 Revolutionary Fitness</small>
</p>
</footer>
</body>
</html>

Use flexbox in .background also remove left & width from .overlay.
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600&display=swap");
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #1b1b1b;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
color: white;
font-size: 27px;
line-height: 70px;
padding-left: 60px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li {
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: cyan;
}
nav ul ul li a:hover {
color: cyan;
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
.background {
background-color: #212529;
width: 100%;
height: 200px;
position: relative;
/* USE FLEXBOX */
display: flex;
align-items: center;
justify-content: flex-start;
/* ADD SOME PADDING FOR BETTER UI */
padding-inline: 16px; /* LEFT and Right */
}
.overlay {
height: 100%;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
}
.overlay h3 {
margin-bottom: 20px;
color: crimson;
font-size: 20px;
}
.overlay p {
font-size: 35px;
}
.main h1 {
display: flex;
text-align: center;
justify-content: center;
margin-top: 20px;
font-size: 50px;
}
.text {
width: 50%;
height: 50px;
padding-top: 20px;
white-space: initial;
margin: 0 auto;
word-wrap: break-word;
}
body {
margin: 0;
font-family: sans-serif;
}
.section {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section img {
height: 250px;
}
.section h1 {
margin-left: 100px;
color: black;
}
.section p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.section2 {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: right;
}
.section2 img {
height: 250px;
}
.section2 h1 {
margin-left: 100px;
color: black;
}
.section2 p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.section2 sup {
font-size: 10px;
opacity: 0.5;
}
.section3 {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section3 img {
height: 250px;
}
.section3 h1 {
margin-left: 100px;
color: black;
}
.section3 sup {
font-size: 10px;
opacity: 0.5;
}
.section3 p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.section4 {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: right;
}
.section4 img {
height: 250px;
}
.section4 h1 {
margin-left: 100px;
color: black;
}
.section4 p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.footer {
background-color: #000;
padding: 40px;
clear: both;
}
.footer .social {
text-align: center;
padding-bottom: 25px;
color: #4b4c4d;
}
.footer .social a {
display: inline-block;
height: 40px;
width: 40px;
background: #424242;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover {
color: #24262b;
background-color: #ffffff;
}
.footer ul {
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a {
color: #fff;
text-decoration: none;
}
.footer ul li {
display: inline-block;
padding: 0 15px;
}
.footer .copyright {
margin-top: 15px;
text-align: center;
font-size: 20px;
color: #fff;
}
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>Classes</li>
<li>Products</li>
<li>Login</li>
<li>Feedback</li>
</div>
</ul>
</nav>
<div class="background">
<div class="overlay">
<h3>Classes</h3>
<p>Insert Something Here...</p>
</div>
</div>
<div class="main">
<h1>Classes, coaches and community</h1>
<div class="text">
<p>At Virgin Active, we do health and fitness differently. We have expertly crafted exercise experiences that are the perfect blend of intelligent programming and feel-good movement. We've got everything from Yoga to HIIT, so you can move your body any
way you want.
</p>
</div>
</div>
<div class="section">
<img src="../ImageFolder/Yoga.jpg" alt="Yoga">
<div class="ClassText">
<h1>Yoga</h1>
<p>
Choose from Classes with dynamism,energy and athleticism, to an authentic and peaceful experience.
<br><br> Classes include: Align,Flow,Calm,SkyPark Yoga
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
<div class="section2">
<div class="ClassText">
<h1>Cycle</h1>
<p>
Custom designed bikes, choreographed lighting and fresh daily beats to inspire you for every ride
<br><br> Classes include: Cycle Spirit, Cycle Burn, RPM<sup>TM</sup>, THE TRIP<sup>TM</sup>
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
<img src="../ImageFolder/Cycle.jpg" alt="Cycle">
</div>
<div class="section3">
<img src="../ImageFolder/Les.jpg" alt="Les">
<div class="ClassText">
<h1>Les Mils<sup>TM</sup></h1>
<p>
Mixing the hottest music with cutting edge-exercise science, motivation and the energy of many, Les Mills<sup>TM</sup> group fitness classes make you fall in love with fitness Discover our range of world-class group fitness workouts below.
<br><br> Classes include: BodyPump<sup>TM</sup>,BodyCombat<sup>TM</sup>,THETRIP<sup>TM</sup>
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
<div class="section4">
<div class="ClassText">
<h1>Reformer Pilates</h1>
<p>
Hundreds of Reformer classes on offer from morning to night.
<br><br> Classes include: Beginner,Intermediate
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
<img src="../ImageFolder/Reformer.jpg" alt="Reformer">
</div>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>About Us</li>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
<p class="copyright">
<small>©2022 Revolutionary Fitness</small>
</p>
</footer>
P.S - added some padding in .background.

Container with Image & Image Description to be Responsive

I am trying to create this simple landing page where there is one row, which contains two <div class="image">, which are container div's which hold the image, the image title, and the image description.
I am trying to get it to be responsive so that when a user on mobile device access the page, the two images will be on one column as opposed to one row. I have started over and over adjusting CSS trying to get what I want, and the closest I have gotten is the example provided in the below snippet.
CSS Stylings I have tried but failed:
#media (min-width: ){} to change max/min size when the screen goes above/below certain pixels
Set a minimum size for the image itself
Tried the same for the container of the image
I couldn't get any of the above to make my landing page responsive.
.container1 {
display: flex;
justify-content: center;
position: relative;
margin-left: 160px;
margin-right: 180px;
}
.container1 p {
text-align: center;
margin: 0;
padding-top: -10px;
}
.container1 h3 {
margin: 10px;
padding: 0;
}
.armycontracts {
width: 100%;
text-align: center;
padding-left: 20px;
}
.armycontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts {
width: 100%;
margin: 0 auto;
text-align: center;
}
.landinghead {
text-align: center;
font-size: 25px;
font-weight: bold;
}
.projectInfo {
text-align: center;
font-size: 15px;
margin-top: 0px;
}
#contentRow {
margin-top: -50px;
}
.container {
display: flex;
justify-content: center;
position: relative;
}
.ms-core-pageTitle {
display: none;
}
.row-one {
width: 100%;
text-align: center;
padding: 20px;
}
#media (min-width: 400px) {
.row-one {
display: flex;
justify-content: center;
}
}
.image {
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
min-height: auto;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
.image__img {
display: block;
width: 100%;
height: 100%;
border-radius: 5px;
}
.image__overlay {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s;
border-radius: 0px;
}
.image__overlay>* {
transform: translateY(20px);
transition: transform 0.25s;
}
.image__overlay:hover {
opacity: 1;
}
.image__overlay:hover>* {
transform: translateY(0);
}
.image__title {
font-size: 2em;
font-weight: bold;
}
.image__description {
font-size: 1.25em;
margin-top: 0.25em;
}
#contentRow {
overflow-y: hidden;
}
#sideNavBox {
DISPLAY: none
}
#contentBox {
margin-left: 0px
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background-color: #ffffff;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
<h3 class="landinghead">Projects Landing Page</h3>
<p class="projectInfo">Here you will find a collection of Active/Ongoing Projects</p>
<div class="row-one">
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" alt="Army" />
<div class="image__overlay">
<div class="image__title">Team 1 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3 <br>
</p>
</div>
</a>
</div>
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://media.defense.gov/2021/Feb/01/2002574582/-1/-1/0/210124-M-WH885-1032.JPG" alt="Usmc" />
<div class="image__overlay">
<div class="image__title">Team 2 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3
</p>
</div>
</a>
</div>
</div>
</body>

.row-one{
width: 80%;
text-align: center;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.image{
flex: 1 45%;
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
This works. JSFiddle

You can use 'flex-direction' to achieve what you want.
This page has pretty good information about it.
https://css-tricks.com/almanac/properties/f/flex-direction/
Apply a flex-direction to your 'row-image' class. Set it to 'column' when you want your elements to stack, set it to 'row' when the elements should flow in a line.

How to move ul div display block

How can I move the nav-links (work & contact) that come up after you toggle the menu icon in mobile view to the left side of the screen (just under and in line the name). Currently targeting the #js-menu.main-nav.active in the media query to do so, but with no luck.
Everything is how it should be when it's in desktop view, but when I shrink to mobile and click on the icon, the nav-links are not in the right position.
let mainNav = document.getElementById("js-menu");
let navBarToggle = document.getElementById("js-navbar-toggle");
navBarToggle.addEventListener("click", function() {
mainNav.classList.toggle("active");
});
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin: 0;
list-style-type: none;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0px;
margin-left: 20px;
}
.navbar-toggle {
display: none;
}
.nav-links,
.logo {
text-decoration: none;
color: black;
}
.navbar {
font-size: 18px;
padding-bottom: 10px;
background: pink;
}
#media screen and (max-width: 500px) {
.navbar-toggle {
position: absolute;
top: 30px;
right: 30px;
display: block;
cursor: pointer;
font-size: 18px;
}
#js-menu.main-nav.active {
display: block;
text-align: left;
margin: 15px 15px 15px 0px;
padding-bottom: 4px;
}
.logo {
display: inline-block;
font-size: 18px;
margin-left: 20px;
}
.main-nav li {
text-align: left;
margin: 15px 15px 15px 0px;
padding-bottom: 4px;
}
.main-nav {
list-style-type: none;
display: none;
padding: 0px 20px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fa fa-bars"></i>
</span>
NAME
<ul class="main-nav" id="js-menu">
<li>
WORK
</li>
<li>
CONTACT
</li>
</ul>
</nav>
</body>

If I understood you right, you want to do something like this.
This should give you the right direction.
Basically you had hardcoded height: 70px; of .navbar.
That's why it didn't expand on the toggle.
let navBar = document.querySelector(".navbar");
let mainNav = document.getElementById("js-menu");
let navBarToggle = document.getElementById("js-navbar-toggle");
navBarToggle.addEventListener("click", function() {
mainNav.classList.toggle("active");
navBar.classList.toggle("active");
});
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin: 0;
list-style-type: none;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0px;
margin-left: 20px;
}
.navbar-toggle {
display: none;
}
.nav-links,
.logo {
text-decoration: none;
color: black;
}
.navbar {
font-size: 18px;
padding-bottom: 10px;
background: pink;
}
.navbar.active{
height: unset;
flex-direction: column;
align-items: flex-start;
padding-top: 24px;
}
#media screen and (max-width: 500px){
.navbar-toggle {
position: absolute;
top: 30px;
right: 30px;
display: block;
cursor: pointer;
font-size: 18px;
}
#js-menu.main-nav.active {
display: block;
text-align: left;
margin: 0;
margin-top: 4px;
padding: 0px;
}
#js-menu.main-nav.active .nav-links {
margin-left: 20px;
}
.logo {
display: inline-block;
font-size: 18px;
margin-left: 20px;
}
.main-nav li {
text-align: left;
margin: 15px 15px 15px 0px;
padding-bottom: 4px;
}
.main-nav {
list-style-type: none;
display: none;
padding: 0px 20px;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fa fa-bars"></i>
</span>
NAME
<ul class="main-nav" id="js-menu">
<li>
WORK
</li>
<li>
CONTACT
</li>
</ul>
</nav>
</body>

Less clunky way of creating a responsive web header?

I've currently got a website header that functions fine on a desktop. I had initially planned to stack the content so that the pages would then display under the logo. I have seen hamburger menus used for a drop-down which is what I'd ultimately like to achieve, retaining the logo on the left.
I know this will likely take time but I think I'm almost there. I just think it'd be easier to have the same elements be responsive rather than creating two separate headers and toggling visibility.
So currently I have this:
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
.mobile-header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.mobile-logo-container {
float: left;
width: 60%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.mobile-navigation-container {
width: 20%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.mobile-logo {
height:8vh;
max-width: 60vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:2vh;
display: block;
object-fit: contain;
}
#media only screen and (max-width: 500px) {
.header {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.header-container {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.logo-container {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.navigation-container {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.logo {
visibility: hidden;
}
}
#media only screen and (min-width: 501px) {
.mobileheader {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-header-container {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-logo-container {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-navigation-container {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-logo {
visibility: hidden;
}
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="./stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
<div class="mobile-header">
<div class="mobile-header-container">
<div class="mobile-logo-container">
<img class="mobile-logo" src="/logo.png" alt="Logo">
</div>
<div class="mobile-navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
<div class="headerfill">
</div>
This looks fine, and is suitable for desktop use. I just need them to be responsive in a way when on mobile the elements adjust.
The icons don't have to switch and I know that can be done with event listeners if needed. Just not sure how to have the original elements format differently on mobile devices without creating two separate headers.
Hopefully the image gives a good enough idea of what I'm aiming for. First time I've tried to attempt this sort of drop-down navigation so thanks in advance :)
UPDATE
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="./stylesheet3.1.css">
</head>
<body>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
Hope this helps. I need to find a way to incorporate that design (using the code I already have) with the answer from #Nyan. I've removed the media queries and the separate mobile and desktop headers. Can't figure this out.
let menu = document.querySelector('nav')
document.querySelector('button')
.addEventListener('click', e => {
menu.classList.toggle('active')
})
header{
position: relative;
display: flex;
background: #ccc;
justify-content: space-between;
}
nav{
display: flex;
}
nav a{
display: block;
padding: 10px;
background: #ddd;
border: 1px solid #aaa;
}
button{
display: none;
}
#media (max-width: 400px) {
nav{
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: right;
display: none;
}
nav.active{
display: block;
}
button{
display: block;
}
}
<header>
logo
<button>menu</button>
<nav>
Page1
Page2
Page3
Page4
</nav>
</header>
It'd run like that, with that structure but retain the initial design. (image above)

You can create just button, which is hidden on big screens and visible on small, and listen click event on it. Or if you don't want to create new elements at all, you can use ::after and ::before, and listen them.
Listener can, for example, toggle class active on list.
List itself can be absolutely positioned to bottom of header, and hidden when doesn't have active class.
let menu = document.querySelector('nav')
document.querySelector('button')
.addEventListener('click', e => {
menu.classList.toggle('active')
})
header{
position: relative;
display: flex;
background: #ccc;
justify-content: space-between;
}
nav{
display: flex;
}
nav a{
display: block;
padding: 10px;
background: #ddd;
border: 1px solid #aaa;
}
button{
display: none;
}
#media (max-width: 400px) {
nav{
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: right;
display: none;
}
nav.active{
display: block;
}
button{
display: block;
}
}
<header>
logo
<button>menu</button>
<nav>
one
two
three
four
</nav>
</header>
Which one of this steps cause you more questions?

Converting standard HTML and JS to work in email

I have created the following HTML for use in sending emails. I was wondering how I would get this to work so that style rules for the images were followed along with the rules for the grey background in the header and footer.
p {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
p {
font-family: 'Roboto', serif;
font-size: 6vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
.headerandfooter {
background-color: #5c5c5c;
width: 100%;
}
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.headerlogo {
max-width: 40%;
padding:2vh;
display: block;
margin-left: auto;
margin-right: auto;
object-fit: contain;
}
#media only screen and (max-width: 500px) {
.headerlogo {
max-width: 60%;
padding:2vh;
display: block;
margin-left: auto;
margin-right: auto;
object-fit: contain;
}
</style>
<style>
.icons {
width: 10%;
max-width: 10%;
padding:1vh;
display: block;
margin-left: auto;
margin-right: auto;
}
#media only screen and (max-width: 500px) {
.icons {
width: 30%;
max-width: 30%;
padding:1vh;
display: block;
margin-left: auto;
margin-right: auto;
}
}
.col-container {
display: table;
float: left;
width: 100%;
padding: 1vh;
background-color: #5c5c5c;
}
.column {
float: left;
width: 50%;
}
h1 {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
h6 {
font-family: 'Roboto', serif;
font-size: 1vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h6 {
font-family: 'Roboto', serif;
font-size: 3vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
</style>
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Style Will Be Linked" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<div class="headerandfooter">
<img class="headerlogo" src="LOGO" draggable="false" alt="Logo">
</div>
<br>
<div class="emailcontent">
<h1>Email Header</h1>
<p>Email Test Content</p>
</div>
<br>
<div class="headerandfooter">
<div class="col-container">
<div class="column">
<img class="icons" src="ICON1IMGURL" draggable="false" alt="ICON1">
</div>
<div class="column">
<img class="icons" src="ICON2IMGURL" draggable="false" alt="ICON2">
</div>
</div>
<div>
<h6>©<script>document.write(new Date().getFullYear());</script><br><br></h6>
</div>
</div>
If you run it, the code does work on web but doesn't correctly render in email, the images do display but none of the CSS does.
Thanks in advance :)

Many email client's such as (Outlook, Yahoo, Gmail) will stripe away styles unless inline. Styles must be inline for email templates to render properly.
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<style type="text/css">
p {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
p {
font-family: 'Roboto', serif;
font-size: 6vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
.headerandfooter {
background-color: #5c5c5c;
width: 100%;
}
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.headerlogo {
max-width: 40%;
padding:2vh;
display: block;
margin-left: auto;
margin-right: auto;
object-fit: contain;
}
#media only screen and (max-width: 500px) {
.headerlogo {
max-width: 60%;
padding:2vh;
display: block;
margin-left: auto;
margin-right: auto;
object-fit: contain;
}
</style>
.icons {
width: 10%;
max-width: 10%;
padding:1vh;
display: block;
margin-left: auto;
margin-right: auto;
}
#media only screen and (max-width: 500px) {
.icons {
width: 30%;
max-width: 30%;
padding:1vh;
display: block;
margin-left: auto;
margin-right: auto;
}
}
.col-container {
display: table;
float: left;
width: 100%;
padding: 1vh;
background-color: #5c5c5c;
}
.column {
float: left;
width: 50%;
}
h1 {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
h6 {
font-family: 'Roboto', serif;
font-size: 1vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h6 {
font-family: 'Roboto', serif;
font-size: 3vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
</style>
<div class="headerandfooter">
<img class="headerlogo" src="LOGO" draggable="false" alt="Logo">
</div>
<br>
<div class="emailcontent">
<h1>Email Header</h1>
<p>Email Test Content</p>
</div>
<br>
<div class="headerandfooter">
<div class="col-container">
<div class="column">
<img class="icons" src="ICON1IMGURL" draggable="false" alt="ICON1">
</div>
<div class="column">
<img class="icons" src="ICON2IMGURL" draggable="false" alt="ICON2">
</div>
</div>
<div>
<h6>©<script>document.write(new Date().getFullYear());</script><br><br></h6>
</div>
</div>
</body>enter code here

Emails doesn't support regular CSS inside style tag and you cannot use few things like negative margins, absolute positions and few other stuff, they won't work in an email client. That is the reason, many people still use standard tables in emailers. you can use all the elements, but better have the styling inline to every particular element. Only system fonts are supported. Roboto would be available only on Android phones in case you choose to use it. all other devices default to serif. And Media queries won't work in emailers. You gotta use some hacks with sizes and floats to achieve what some people call responsive emailers. Emailer services Gmail/yahoo mail and clients outlook/apple mail etcetera will strip away all the external CSS which is not inline. And each of them may render things differently. when you try to email testing service with this code, all they do is strip the CSS and add it inline to your HTML.