Develop Reference

Responsive Navigation Hamburger Menu not working

I'm trying to make my navigation responsive but when i tried to resize my window, my hamburger doesn't allow the dropdown function to work. I took both the navigation and responsive hamburger online so is there somewhere that might be overwriting the hamburger ?
This is my HTML
<header>
<div class="logo">
<p>LEGEND</p>
<div class= "hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>
This is my css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a, button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
This is my css when it's responsive
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: block;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-botton: 12px;
}
}
This is my javascript
<script>
hamburger = document.querySelector(".hamburger");
hamburger.onClick = function() {
navBar = document.querySelector(".nav-bar");
navbar.classList.toggle("active");
}
</script>

UPDATE
I revised the solution so that the 2 blocks are for:
In small screen but active is not on
In small screen and active is on
This separation protects the style from broken when transition happen as active toggles.
More styles can be added to the first block to define how this list should look like, such as making it display the list in column.
Example:
.nav-bar ul {
display: flex;
flex-direction: column;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
Original
This is because your JS code has some syntax error. Here is what to do:
Use const to declare hamburger and navbar.
Call addEventListener on hamburger to add the function for toggling class of navbar
Follow the below example to revise your code, or visit a live demo of it fixed here: codepen
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav-bar");
hamburger.addEventListener("click", () => navbar.classList.toggle("active"));
Hope this solution will help.

Your code has nothing wrong, just few typos in your JavaScript:
You have onClick instead of onclick
navbar instead of navBar at navbar.classList.toggle("active")
Corrected version
<script>
hamburger = document.querySelector(".hamburger");
hamburger.onclick = function() {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
}
</script>
Extra (Change display: block; to display: grid; in .nav-bar ul selector in CSS media query to display dropdown in vertical list)
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
hamburger = document.querySelector(".hamburger");
hamburger.onclick = function() {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a,
button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-bottom: 12px;
}
}
<header>
<div class="logo">
<p>LEGEND</p>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>
Better Solution
Quote from MDN Web Docs, as in this link:
The recommended mechanism for adding event handlers in web pages is the addEventListener() method
You may use addEventListener() to achieve the same result:
<script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
});
</script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a,
button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-bottom: 12px;
}
}
<header>
<div class="logo">
<p>LEGEND</p>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>
Alternate Solution
For readers who are more familiar to add() / remove(), here's some alternatives:
<script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
if (navBar.classList.contains("active")) {
navBar.classList.remove("active");
} else {
navBar.classList.add("active");
}
});
</script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
if (navBar.classList.contains("active")) {
navBar.classList.remove("active");
} else {
navBar.classList.add("active");
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a,
button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-bottom: 12px;
}
}
<header>
<div class="logo">
<p>LEGEND</p>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>

How can I make an element's background transparent?

I cant make the background of some elements transparent for mobile view. I'm using React.
I tried to add background-color and background with value transparent to nearly every class, but it does not remove the background properly. Does anyone have suggestions how to fix this?
standard view:
mobile view:
js:
export const NavBar = () => {
return (
<nav className="flex custom-nav">
<ul className="nav-list flex">
<li>Home</li>
<li>Skills</li>
<li>Projects</li>
</ul>
<span className="social-icon-list">
<a href="#"><img className="social-icon" src={socialIcon1}
alt=""/></a>
<a href="#"><img className="social-icon" src={socialIcon2}
alt=""/></a>
</span>
<button>Let's Connect</button>
</nav>
);
}
css for my js file
* {
font-family: Centra, sans-serif;
margin: 0;
padding: 0;
}
a {
text-decoration: none !important;
color: #fff !important;
font-weight: 400;
opacity: 0.85;
}
.flex {
display: flex;
gap: 1.5rem;
}
nav {
padding: 20px 50px 0 0;
justify-content: end;
align-items: center;
}
.nav-list {
list-style-type: none;
font-size: 1.5em;
align-items: center;
margin-top: auto;
padding: 0;
background-color: transparent;
}
button {
background-color: transparent;
border: 1px solid #fff;
padding: 18px 34px;
font-size: 1.3em !important;
flex-shrink: 0;
color: #fff;
opacity: 0.85;
}
.social-icon-list {
flex-shrink: 0;
}
.social-icon {
width: 42px;
border-radius: 50% !important;
margin-right: 6px;
background-color: white;
opacity: 0.85;
}
#media (max-width: 44em) {
.custom-nav {
position: fixed;
inset: 0 0 0 30%;
background: aqua;
flex-direction: column;
justify-content: start;
align-items: center;
padding: 0;
margin: 0;
}
.nav-list {
flex-direction: column;
padding: min(25vh, 5rem) 0 0 0;
margin: 0;
gap: 1rem;
}
button {
margin: 0;
}
}
css for the whole app
* {
background-color: #262626;
}

Your problem is in here:
* {
background-color: #262626;
}
This sets the background color of absolutely everything, so you'd have to overwrite it for absolutely everything.
If you want a "global" background, only set that on your root element. Generally, html or body are excellent containers for that:
body {
background-color: #262626;
}

How to make a sticky Navigation Bar | HTML, CSS & JS

I would like to ask how can I make my existing navbar a sticky one?
I've tried adding in the Javascript..But the alignments seem to be off.
i am taking reference from https://codingartistweb.com/2021/12/responsive-navigation-bar-html-css-js/#comment-4063 and also https://codingartistweb.com/2020/10/sticky-navbar-html-css-and-javascript-tutorial/.
document.addEventListener('DOMContentLoaded', function(){
var nav = document.getElementById("navbar");
var current_pos = nav.offsetTop;
window.onscroll = function(){
var window_pos = document.documentElement.scrollTop;
if(window_pos>=current_pos){
nav.classList.add("sticky");
}
else{
nav.classList.remove("sticky");
}
}
} )
const navToggler = document.querySelector(".nav-toggler");
const navMenu = document.querySelector(".site-navbar ul");
const navLinks = document.querySelectorAll(".site-navbar a");
allEventListners();
function allEventListners() {
navToggler.addEventListener("click", togglerClick);
navLinks.forEach((elem) => elem.addEventListener("click", navLinkClick));
}
// togglerClick function
function togglerClick() {
navToggler.classList.toggle("toggler-open");
navMenu.classList.toggle("open");
}
// navLinkClick function
function navLinkClick() {
if (navMenu.classList.contains("open")) {
navToggler.click();
}
}
/* Nav Bar */
.sticky {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
background: linear-gradient(30deg, #000000, #69b962);
position: fixed;
z-index: 99;
top: 0;
}
.sticky a {
color: white;
}
/*Styling Buttons*/
.login-button {
background-color: transparent;
margin-left: 2vw;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
color: #131418;
background-color: #063b0a;
transition: all ease-in-out 350ms;
}
.join-button {
color: #131418;
background-color: #1b878f;
font-size: 1rem;
cursor: pointer;
}
.join-button:hover {
color: #f2f5f7;
background-color: transparent;
}
/* default css start */
.container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
}
/* navbar regular css start */
.navbar-area {
background: linear-gradient(30deg, #000000, #69b962);
}
.site-navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
a.site-logo {
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.site-navbar ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.site-navbar ul li a {
color: #fff;
padding: 20px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.site-navbar ul li a:hover {
background: rgba(255, 255, 255, 0.1);
}
/* nav-toggler css start */
.nav-toggler {
border: 3px solid #fff;
padding: 5px;
background-color: transparent;
cursor: pointer;
height: 39px;
display: none;
}
.nav-toggler span,
.nav-toggler span:before,
.nav-toggler span:after {
width: 28px;
height: 3px;
background-color: #fff;
display: block;
transition: 0.3s;
position: relative;
z-index: 99;
}
.nav-toggler span:before {
content: "";
transform: translateY(-9px);
}
.nav-toggler span:after {
content: "";
transform: translateY(6px);
}
.nav-toggler.toggler-open span {
background-color: transparent;
}
.nav-toggler.toggler-open span:before {
transform: translateY(0px) rotate(45deg);
}
.nav-toggler.toggler-open span:after {
transform: translateY(-3px) rotate(-45deg);
}
/* intro-area css start */
.intro-area {
height: calc(100vh - 61px);
display: flex;
align-items: center;
text-align: center;
color: #fff;
}
.intro-area h2 {
font-size: 50px;
font-weight: 300;
line-height: 50px;
margin-bottom: 25px;
}
.intro-area p {
font-size: 18px;
}
/* mobile breakpoint start */
#media screen and (max-width: 767px) {
.container {
max-width: 720px;
}
/* navbar css for mobile start */
.nav-toggler {
display: block;
}
.site-navbar {
min-height: 60px;
}
.site-navbar ul {
position: absolute;
width: 100%;
height: calc(100vh - 60px);
left: 0;
top: 60px;
flex-direction: column;
align-items: center;
border-top: 1px solid #444;
background-color: rgba(0, 0, 0, 0.75);
max-height: 0;
overflow: hidden;
transition: 0.3s;
}
.site-navbar ul li {
width: 100%;
text-align: center;
}
.site-navbar ul li a {
padding: 25px;
}
.site-navbar ul li a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.site-navbar ul.open {
max-height: 100vh;
overflow: visible;
}
.intro-area h2 {
font-size: 36px;
margin-bottom: 15px;
}
}
<!-- site-navbar start -->
<div class="navbar-area">
<div class="container">
<nav class="site-navbar" id="navbar">
<!-- site logo -->
<a href="index.html">
<img src="images/org_logo.png" alt="logo" width="50" height="44" />
</a>
<!-- site menu/nav -->
<ul>
<li>Home</li>
<li>Race Information</li>
<li>FAQ</li>
<li>Contact Us</li>
<li class="login-button ">My Account</li>
<li class="join-button">Register</li>
</ul>
<!-- nav-toggler for mobile version only -->
<button class="nav-toggler">
<span></span>
</button>
</nav>
</div>
</div>

How do I get my Body to be all black? Some of it is Grey?

https://gx0st.com
So, if you guys check that, at least on my resolution 1920x1080. It has grey at the bottom, so it isn't fitting all the way. And if you check https://gx0st.com/contact.html you will see the same. If you guys could please help a noobie, I'd appreciate it. I just want it to be all black, and fit.
If you guys have any recommendations too on how to optimize it for mobile, that'd be fun. I will look into that anywho. But thanks to anyone who helps me with the first problem. <3
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="page-wrapper">
<header id="header">
<div class="logo">
</div>
<nav id="nav-bar">
<ul>
<li><b>Youtube</b></li>
<li><b>Contact</b></li>
</ul>
</nav>
</header>
<div class="container"></div>
<section id="hero">
<form id="form"
action="mailto:godislove1427#gmail.com">
<input
name="email"
id="email"
type="email"
placeholder="Email Address"
required/>
<input id="submit" type="submit"
value="HQ" class="btn" /></input></form>
</section>
</section>
<section id="how-it-works">
<iframe
id="video"
height="315"
src="https://www.youtube-nocookie.com/embed/mjq6kZSwTmI"
frameborder="0"
allowfullscreen></iframe></section>
<section id="pricing">
<div class="product" id="tenor">
<ul>
</div>
</section>
<footer>
<span>Copyright 2018, Ghost Robles</span>
</footer>
</div>
</div>
</html>
<style>
#font-face {font-family: 'vcr_osd_mono-webfont'; src: url('vcr_osd_mono-webfont.eot'); src: url('vcr_osd_mono-webfont.eot?#iefix') format('embedded-opentype'), url('vcr_osd_mono-webfont.woff2') format('woff2'), url('vcr_osd_mono-webfont.woff') format('woff'), url('vcr_osd_mono-webfont.ttf') format('truetype'), url('webfont.svg#svgFontname') format('svg');}
title {text-align: center;
font-family: "vcr_osd_mono-webfont";}
h2 {text-align: center;
font-family: "vcr_osd_mono-webfont";}
p {text-align: center;
color: purple;
font-family: "vcr_osd_mono-webfont";}
nav {text-align: center;}
body {background-color: rgb(0, 0, 0);
cursor: url(http://cur.cursors-4u.net/toons/too-3/too297.cur), auto;}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#page-wrapper {
position: relative;
}
li {
list-style: none;
}
a {
color: rgb(255, 2, 2);
text-decoration: none;
font-size: 35px;
font-family: "vcr_osd_mono-webfont";
}
/** global classes styling **/
.container {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.btn {
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
border: 3px rgb(255, 0, 0) solid;
border-radius: 2px;
background: transparent;
cursor: pointer;
}
.grid {
display: flex;
}
header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: rgb(0, 0, 0);
}
#media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
.logo {
width: 60vw;
}
#media (max-width: 650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.logo > img {
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
}
#media (max-width: 650px) {
.logo > img {
margin: 0 auto;
}
}
nav {
font-weight: 400;
}
#media (max-width: 650px) {
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
}
nav li {
padding-bottom: 5px;
}
}
nav > ul {
width: 35vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
#media (max-width: 650px) {
nav > ul {
flex-direction: column;
}
}
#hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 200px;
margin-top: 50px;
}
#hero > h2 {
margin-bottom: 20px;
word-wrap: break-word;
}
#hero input[type="email"] {
max-width: 275px;
width: 100%;
padding: 5px;
}
#hero input[type="submit"] {
max-width: 150px;
width: 100%;
height: 30px;
margin: 15px 0;
border: 0;
background-color: #c300ffea;
}
#media (max-width: 650px) {
#hero {
margin-top: 120px;
}
}
#features {
margin-top: 30px;
}
#media (max-width: 550px) {
#features .icon {
display: none;
}
}
#features .desc {
display: flex;
flex-direction: column;
justify-content: center;
height: 125px;
width: 80vw;
padding: 5px;
}
#media (max-width: 550px) {
#features .desc {
width: 100%;
text-align: center;
padding: 0;
height: 150px;
}
}
#media (max-width: 650px) {
#features {
margin-top: 0;
}
}
#how-it-works {
margin-top: 50px;
display: flex;
justify-content: center;
}
#how-it-works > iframe {
max-width: 560px;
width: 100%;
}
#pricing {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.product > .level {
background-color: rgb(0, 0, 0);
color: rgb(0, 0, 0);
padding: 15px 0;
width: 100%;
text-transform: uppercase;
font-weight: 700;
}
.product > h2 {
margin-top: 15px;
}
.product > ol {
margin: 15px 0;
}
.product > ol > li {
padding: 5px 0;
}
.product > button:hover {
background-color: rgb(0, 0, 0);
transition: background-color 1s;
}
#media (max-width: 800px) {
#pricing {
flex-direction: column;
}
.product {
max-width: 300px;
width: 100%;
margin: 0 auto;
margin-bottom: 10px;
}
}
footer {
margin-top: 30px;
background-color: rgb(0, 0, 0);
padding: 20px;
}
footer > ul {
display: flex;
justify-content: flex-end;
}
footer > ul > li {
padding: 0 10px;
}
footer > span {
margin-top: 5px;
display: flex;
justify-content: flex-end;
font-size: 0.9em;
color: rgb(255, 0, 0);
}
::placeholder {text-align: center;}
.btn {color: rgb(255, 255, 255);}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-137617043-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-137617043-2');
</script>
</html>
**Contact.HTML**
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
<!-- START NAV -->
<nav id="navbar" class="nav">
<ul class="nav-list">
<li>
HQ
</li>
</ul>
</nav>
<!-- END NAV -->
<!-- START CONTACT SECTION -->
<body>
<section id="contact" class="contact-section">
<div class="contact-section-header">
<h2>Let's work together!</h2>
</div>
<div class="contact-links">
<a
href="https://www.instagram.com/ghostrobles"
target="_blank"
class="btn contact-details"
><i class="fab fa-instagram"></i> Instagram</a
>
<a
id="profile-link"
href="https://www.youtube.com/channel/UCSM3fpzXloGLNL7N6qnjamA"
target="_blank"
class="btn contact-details"
><i class="fab fa-youtube"></i> Youtube</a
>
<a
>
<a href="mailto:godislove1427#gmail.com" class="btn contact-details"
><i class="fas fa-at"></i> Gmail</a
>
</div>
</section>
</body>
<!-- END CONTACT SECTION -->
<!-- START FOOTER SECTION -->
<footer class="site-footer">
<div id="footer-content">
<a href="https://www.youtube.com/channel/UCSM3fpzXloGLNL7N6qnjamA"
©Ghost Robles>
<a href="https://www.youtube.com/channel/UCSM3fpzXloGLNL7N6qnjamA" target="_blank"
>©Ghost Robles
</a>
</p>
<!-- END FOOTER SECTION -->
</footer>
<style>
#font-face {font-family: 'vcr_osd_mono-webfont'; src: url('vcr_osd_mono-webfont.eot'); src: url('vcr_osd_mono-webfont.eot?#iefix') format('embedded-opentype'), url('vcr_osd_mono-webfont.woff2') format('woff2'), url('vcr_osd_mono-webfont.woff') format('woff'), url('vcr_osd_mono-webfont.ttf') format('truetype'), url('webfont.svg#svgFontname') format('svg');}
/* Custom properties/variables */
:root {
--main-white: #ff0000;
--main-red: #000000;
--main-blue: #000000;
--main-gray: #000000;
}
/* Base reset */
* {
margin: 0;
padding: 0;
}
/* box-sizing and font sizing */
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
/* Set font size for easy rem calculations
* default document font size = 16px, 1rem = 16px, 100% = 16px
* (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
*/
font-size: 62.5%;
scroll-behavior: smooth;
}
/* A few media query to set some font sizes at different screen sizes.
* This helps automate a bit of responsiveness.
* The trick is to use the rem unit for size values, margin and padding.
* Because rem is relative to the document font size
* when we scale up or down the font size on the document
* it will affect all properties using rem units for the values.
*/
/* I am using the em unit for breakpoints
* The calculation is the following
* screen size divided by browser base font size
* As an example: a breakpoint at 980px
* 980px / 16px = 61.25em
*/
/* 1200px / 16px = 75em */
#media (max-width: 75em) {
html {
font-size: 60%;
}
}
/* 980px / 16px = 61.25em */
#media (max-width: 61.25em) {
html {
font-size: 58%;
}
}
/* 460px / 16px = 28.75em */
#media (max-width: 28.75em) {
html {
font-size: 55%;
}
}
/* Base styles */
body {
font-family: "vcr_osd_mono-webfont";
font-size: 1.8rem; /* 18px */
font-weight: 400;
line-height: 1.4;
color: rgb(108, 6, 204);
}
h1,
h2 {
font-family: 'Raleway', sans-serif;
font-weight: 700;
text-align: center;
}
h1 {
font-size: 6rem;
}
h2 {
font-size: 4.2rem;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: var(--main-white);
}
img {
display: block;
width: 100%;
}
/* nav */
.nav {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--main-red);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
z-index: 10;
}
.nav-list {
display: flex;
margin-right: 2rem;
}
#media (max-width: 28.75em) {
.nav {
justify-content: center;
}
.nav-list {
margin: 0 1rem;
}
}
.nav-list a {
display: block;
font-size: 2.2rem;
padding: 2rem;
}
.nav-list a:hover {
background: var(--main-blue);
}
/* Welcome section */
.welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #000;
background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}
.welcome-section > p {
font-size: 3rem;
font-weight: 200;
font-style: italic;
color: var(--main-red);
}
/* Projects section */
.projects-section {
text-align: center;
padding: 10rem 2rem;
background: var(--main-blue);
}
.projects-section-header {
max-width: 640px;
margin: 0 auto 6rem auto;
border-bottom: 0.2rem solid var(--main-white);
}
#media (max-width: 28.75em) {
.projects-section-header {
font-size: 4rem;
}
}
/* "Automagic" image grid using no media queries */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 6rem;
}
#media (max-width: 30.625em) {
.projects-section {
padding: 6rem 1rem;
}
.projects-grid {
grid-template-columns: 1fr;
}
}
.project {
background: var(--main-gray);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
border-radius: 2px;
}
.code {
color: var(--main-gray);
transition: color 0.3s ease-out;
}
.project:hover .code {
color: #ff7f50;
}
.project-image {
height: calc(100% - 6.8rem);
width: 100%;
object-fit: cover;
}
.project-title {
font-size: 2rem;
padding: 2rem 0.5rem;
}
.btn {
display: inline-block;
padding: 1rem 2rem;
border-radius: 2px;
}
.btn-show-all {
font-size: 2rem;
background: var(--main-gray);
transition: background 0.3s ease-out;
}
.btn-show-all:hover {
background: var(--main-red);
}
.btn-show-all:hover > i {
transform: translateX(2px);
}
.btn-show-all > i {
margin-left: 10px;
transform: translateX(0);
transition: transform 0.3s ease-out;
}
/* Contact section */
.contact-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 80vh;
padding: 0 2rem;
background: var(--main-gray);
}
.contact-section-header > h2 {
font-size: 6rem;
}
#media (max-width: 28.75em) {
.contact-section-header > h2 {
font-size: 4rem;
}
}
.contact-section-header > p {
font-style: italic;
}
.contact-links {
display: flex;
justify-content: center;
width: 100%;
max-width: 980px;
margin-top: 4rem;
flex-wrap: wrap;
}
.contact-details {
font-size: 2.4rem;
text-shadow: 2px 2px 1px #000000;
transition: transform 0.3s ease-out;
}
.contact-details:hover {
transform: translateY(8px);
}
/* Footer */
footer {
font-weight: 300;
display: default;
justify-content: space-evenly;
padding: 2rem;
background: var(--main-gray);
border-top: 4px solid var(--main-red);
}
footer > p {
margin: 2rem;
}
footer i {
vertical-align: middle;
}
#media (max-width: 28.75em) {
footer {
flex-direction: column;
text-align: center;
}
}
.site-footer {
background: rgb(0, 0, 0);
}
#footer-content {
background: rgb(0, 0, 0);
}
</style>

To make the black fill all the page, just type at the css:
html, body{
height: 100vh;
}
body{
z-index: -1;
}
And change the z-index of the nav to 1.

You can always provide a background color to the body element
body{
background-color: black;
}
This color should persist through window resizing as well

I think that just setting the body height to 100% will fix it.
CSS:
html, body{
height: 100%;
background-color: black;
}

The reason for that is that the content you've added and the way you style it does not fill the entire screen, therefore the color ends where your 'last element' is placed.
setting height: 100vh will make the height of the element the same as the height of the screen itself. Avoid setting heights in the body, your webpage might grow and that will become a problem.

How do i adjust the breakpoint of my buttons so that they will collapse into a column?

When I decrease my screen size the buttons start to overlap, i was hoping to decrease the breakpoints so that when i decrease the screen size the buttons will collapse. All of my buttons eventually fall into place however i was just wanting them to change as the screen moves. Any help on this would be appreciated, thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS grid example</title>
<link rel="stylesheet" href="style/styles.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="grid">
<header>Manchester United F.C.</header>
<figure> <img src="images/untlogo.png" style="width:60px;height:60px" >
</figure>
<nav id="menu-nav">
<div class="menu">Menu</div>
<ul>
<li>Home</li>
<br>
<li>FAQ</li>
<br>
<li>Form</li>
<br>
<li>Links</li>
</nav>
<main class="main-home">
<div class="wrapper-home">
<div class="wrapper-button">
<section class="home-left">
<a href="https://www.manutd.com/en/news/first-team">
<article class="ole">
<img src="images/ole.jfif" alt="Ole">
<div class="text-wrap">
<h4>Team News</h4>
<p>"Ole Gunnar Solskjaer has freshened up his United side to face
Reading in the Emirates FA Cup".
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/news/detail/marcus-rashford-learning-
from-solskjaer-and-ronaldo">
<article class="rash">
<img src="images/rash.jfif" alt="Rash">
<div class="text-wrap">
<h4>Rashfords Breakthrough</h4>
<p>" Why Rashford had shades of Solskjaer and Ronaldo in his game at
Newcastle"
</p>
</div>
</article>
</a>
</section>
<section class="home-right">
<a href="https://www.manutd.com/en/news/detail/vote-for-man-united-goal-
of-
the-month-for-december-2018">
<article class="goals">
<img src="images/goals.jfif" alt="goals">
<div class="text-wrap">
<h4>Goals from the month</h4>
<p>"Watch the eight United goals on our shortlist for December and
cast your vote."
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/first-team">
<article class="players">
<img src="images/team.jpg" alt="Players">
<div class="text-wrap">
<h4>Player Profiles</h4>
<p>" Click here to look at the offical 2018/19 Manchester United
squad!"
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/news/detail/paul-pogba-wins-man-utd-
player-of-the-month-award-for-december-2018">
<article class="potm">
<img src="images/potm.jpg" alt="POTM">
<div class="text-wrap">
<h4>Player of the Month</h4>
<p>"Fans have picked Paul Pogba as United's top performer of the past
month."
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/news/detail/ole-gunnar-solskjaer-on-
the-
new-year-and-facing-newcastle-united">
<article class="newyear">
<img src="images/newyear.jfif" alt="NewYear">
<div class="text-wrap">
<h4>Ole's 2019 Plan</h4>
<p>" Ole tells MUTV why he thinks this new year will be enjoyable for
fans"
</p>
</div>
</article>
</a>
</section>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/women">
<article class="women">
<img src="images/women.jfif" alt="Women">
<div class="text-wrap">
<h4>Womens Team</h4>
<p>"Click here to look at the offical 2018/19 womens Manchester United
squad!"</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/reserves">
<article class="newyear">
<img src="images/u23s.jpg" alt="u23s">
<div class="text-wrap">
<h4>u23s Team</h4>
<p>"Click here to look at the offical 2018/19 u23s Manchester United
squad!"
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/legends">
<article class="legends">
<img src="images/legends.jpg" alt="Legends">
<div class="text-wrap">
<h4>Manchester United Legends</h4>
<p>"Click here to look at all of the past Manchester United legend
players"
</p>
</div>
</article>
</a>
</div>
</main>
<nav id="menu-nav2">
</nav>
<script src=".js/script.js"></script>
</body>
</html>
**Style sheet**
* {
padding: 0;
margin: 0;
border: 0;
font-family: 'Ubuntu', sans-serif;
text-decoration: none;
}
body {
margin: 0;
font-family: Avenir, Helveltica, Arial, san-serif;
font-weight: bold;
font-size: 1.5rem;
color: black;
background-image: url("../images/stad.jpg");
background-size: cover;
}
/* use of * wildcard selector known to be slow so only for demo! */
body > * {
padding: 1em;
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns:repeat (5, 1fr);
grid-template-rows: repeat(5, 1fr);
/*grid-gap: 6px; */
grid-template-areas:
"header header"
"menu menu";
}
header {
grid-area: header;
background: darkred;
box-shadow: 0px 4px 5px 0px darkred;
color: white;
}
.menu {
padding-top: 25px;
padding-bottom: 25px;
text-align: center;
}
#menu-nav2 {
grid-area: side;
background-image: url("../images/pogba3.png");
background-size: cover;
box-shadow: -5px -30px 5px 0px darkred;
}
nav {
grid-area: menu;
margin: 0;
padding: 0;
background: darkred;
box-shadow: 4px 0px 5px 0px darkred;
}
nav a {
text-decoration: none;
color: white;
}
nav ul {
list-style: none;
text-align: center;
width: 100%;
}
nav li {
height: 20px;
width: 100%;
text-align: center;
transition: box-shadow 1s;
}
nav ul li a {
padding: 0;
margin: 0;
}
nav li:hover {
box-shadow: inset 0 -100px 0 0 black;
color: black;
}
nav li:hover a {
color: darkred;
}
figure {
grid-area: figure;
background: darkred;
margin: 0;
padding-top: 10px;
text-align: center;
}
figure img {
height: 50px;
width: 50px;
}
main {
grid-area: content;
/* increasing the height of one element increases all row heights */
/*height: 25vh;*/
}
/* Start of form */
.main-form {
width: 100%;
order: 2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #333;
}
form {
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: #C2C2C2;
width: 25%;
height: 600px;
padding: 1%;
box-shadow: 0 5px 20px black;
}
.form {
width: 400px;
}
.form_name {
width: 90%;
}
.email {
width: 90%;
}
.enquiry {
width: 90%;
height: 20%;
margin: 3%;
}
.button_form {
width: 20%;
height: 6%;
cursor: pointer;
}
#media screen and (min-width: 300px) {
.grid {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 10vh 50vh 50vh ;
grid-template-areas:
"figure header header"
"menu menu menu "
"content content content"
"content content content"
"side side side";
}
}
#media screen and (min-width: 600px) {
.grid {
grid-template-columns: 1fr 9fr 1fr;
/*grid-template-rows: 1fr 1fr 1fr 1fr;*/
/*or set the rows to 'view height (vh)'*/
grid-template-rows: 10vh 100vh 1vh;
grid-template-areas:
"figure header header"
"menu content side"
"menu content side";
}
}
nav {
justify-content: flex-start;
}
nav a {
padding: 1em;
}
input {
margin: 3%;
}
/* Home page content */
#searchForm {
height: auto;
width: 50%;
}
.wrapper-home {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* start of home */
ul {
list-style-type: none;
display: table;
width: 90%;
border-spacing: 0 10px;
}
li {
display: table-row;
}
li strong, li .txt, li .langs {
display: table-cell;
vertical-align: middle;
}
img {
display: table-cell;
padding-right: 10px;
}
li .txt {
width: 60%;
padding-right: 10px;
}
li:nth-child(even) {
background: #eee;
}
.main-home {
height: 85%;
order: 2;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.wrapper-button {
height: 80%;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
}
.main-home article {
height: 10vmin;
width: 100%;
background-color: rgba(166, 14, 22, 0.5);
border-bottom: 1vmin solid rgba(166, 14, 22, 1);;
border-radius: 15px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-right: 100px;
}
.text-wrap {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.text-wrap p {
font-size: 1.5vmin;
}
.text-wrap h4 {
font-size: 2.1vmin;
}
.main-home section {
width: 40vmin;
margin: .5%;
}
.ole img {
height: 100%;
width: auto;
}
.ole h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.ole p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.rash img {
height: 100%;
width: auto;
}
.rash h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.rash p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.goals img {
height: 100% ;
width: auto;
}
.goals h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.goals p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.players img {
height: 100%;
width: auto;
}
.players h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.players p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.potm img {
height: 100%;
width: auto;
}
.potm h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.potm p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.newyear img {
height: 100%;
width: auto;
}
.newyear h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.newyear p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.prem img {
height: 100%;
width: auto;
}
.prem h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.prem p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.women img {
height: 100%;
width: auto;
}
.women h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.women p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.u23s img {
height: 100%;
width: auto;
}
.u23s h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.u23s p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.legends img {
height: 100%;
width: auto;
}
.legends h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.legends p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.main-home article:hover {
transform: scale(1.1);
}
.video-wrapper {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.video-wrapper iframe {
padding: 10px;
}
.wiki-header {
color: #DBE3DF;
}
#demo {
background-color: white;
text-decoration: none;
}
.txt {
font-size: 2.1vmin;
}
/* End of home page content */
.faq-main {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* start of faq */
.faq-main h2{
color:darkred;
}
.faq-main p{
color:darkred;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
adding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: grey;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/*end of FAQ*/
/* start of links.html */
.wrapper-contact {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
}
.main-contact {
height: 85%;
order: 2;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.main-contact article {
height: 12vmin;
width: 50vmin;
background-color: rgba(51, 51, 51, 0.5);
border: 1vmin solid black;
border-radius: 10px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin: 5%;
}
.main-contact section {
margin: 2.5%;
}
.facebook img {
height: 100%;
width: auto;
}
.facebook h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 4vmin;
margin: 10%;
}
.gmail img {
height: 50%;
width: auto;
margin-left: 5%;
}
.gmail h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 2.5vmin;
margin: 10%;
}
.twitter img {
height: 100%;
width: auto;
}
.twitter h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 3.5vmin;
margin: 10%;
}
.number img {
height: 70%;
width: auto;
margin-left: 5%;
}
.number h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 4vmin;
margin: 10%;
}
.button-area {
display: flex;
justify-content: center;
align-items: center;
}
.contact_me img {
height: 70%;
width: auto;
margin-left: 5%;
}
.contact_me h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 3.5vmin;
margin: 10%;
}
.main-contact article:hover {
transform: scale(1.1);
}
/* end of links.html */
/* footer */
footer {
grid-area: footer;
width: 100%;
height: 5%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
order: 3;
}
footer a {
color: #9fff80;
margin-left: 1vmin;
margin-right: 1vmin;
font-size: 2vmin;
}
.icons {
display: flex;
align-items: center;
height: 100%;
}
i {
color: white;
cursor: pointer;
font-size: 2vmin;
}
i p {
display: none;
font-size: 2vmin;
transition: all 2s;
margin-left: 1vmin;
}
i:hover {
color: #9fff80;
}
i:hover p {
color: #9fff80;
display: inline-block;
}
.cr {
display: flex;
align-items: center;
margin-right: 10vmin;
width: 25%;
height: 100%;
}

How do i adjust the breakpoint of my buttons so that they will collapse into a column?
short answer is:
display: flex;
flex-direction: column;
justify-content: center;