Develop Reference

Why does my page width only stretch to 100% with "fit-content"?

I have tried looking around for this but can't seem to find a question to match my current problem. I am trying to build a mock ecommerce website to practice using React. I have a header component. I want this component to be 100% of the screen width, so that the elements inside this component shrink whenever the page shrinks. I have some global css that sets the height and width of the html and body to 100%:
html, body{
background-color: rgb(167, 72, 72);
height: 100%;
min-width: 100%;
}
I am currently facing two problems, neither of which I understand very well the causes of. When I set my header component (the outermost component) to have a width of 100%, the page shrinks correctly. But when I open up developer tools to check the responsiveness, something goes wrong so that the right side of my header is shrinking faster than the page header_shrink
I am able to fix this by setting the width of my header to "fit-content" instead of "100%". Here is what the header looks like when I shrink the page using developer tools.header_fixed But when I do it this way, the components inside of my header don't shrink correctly. For example, my search bar is supposed to decrease in width as I shrink the page, but when I use "fit-content", it just stays set to whatever size it is. search-bar-constant. When I have the width set to 100% instead of fit content, it looks the way it's supposed to search-bar-fixed.
Sorry for the long explanation, but this is the bulk of my problem. "Width: 100%" allows the items in my header component to shrink correctly, but not the component itself. And "width: fit-content" allows the outer header component to shrink correctly, but not the items inside of it.
Here is the JSX I have for reference:
import React from 'react'
import './Header.css'
import { BiSearchAlt2 as SearchIcon} from "react-icons/bi";
import {RiArrowDropDownLine as DropDownIcon} from "react-icons/ri";
import { CgProfile as Profile } from "react-icons/cg";
import { CgShoppingCart as Cart } from "react-icons/cg";
const Header = () => {
const texts = [
'ORDERS OF $5K SHIP FREE',
'FREE SHIPPING ON SELECT ITEMS: SHOP NOW',
'BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE'
];
let currentTextIndex = 0;
setInterval(() => {
const shippingDealsText = document.querySelector('.shipping-deals-text');
shippingDealsText.classList.add('out');
setTimeout(() => {
shippingDealsText.textContent = texts[currentTextIndex];
shippingDealsText.classList.remove('out');
currentTextIndex = (currentTextIndex + 1) % texts.length;
}, 1000);
}, 5000);
return (
<div className="header">
<div className="header-top">
<div className="top-logo">
<h5 className='small-logo'>LEVIATHAN</h5>
</div>
<div className="space"></div>
<div className="link-container">
<div className="link-wrap">
Gift Cards
</div>
<div className="link-wrap">
Contact Us
</div>
<div className="link-wrap">
Order Status
</div>
<div className="link-wrap">
Live Chat
</div>
</div>
</div>
<div className="header-middle">
<div className="middle-logo">
<h5 className='big-logo'>LEVIATHAN</h5>
</div>
<div className="search-container">
<div className="search-wrapper">
<input
type="text"
id="search-bar"
placeholder="Search"
className='search'
/>
<div className="search-icon-wrapper">
<SearchIcon className='search-icon'/>
</div>
</div>
</div>
<div className="shipping-deals-container">
<div className="button-container">
<div className="shipping-deals-button">
<span className="deals-text">DAILY SHIPPING DEALS </span>
</div>
</div>
<div className="text-container">
<div className="text-slideshow">
<p className="shipping-deals-text">BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE</p>
</div>
</div>
</div>
<div className="icons-right">
<Profile className='login-pic'/>
<span>Log In</span>
<Cart className='shopping-cart'/>
</div>
</div>
<div className="header-bottom">
<div className="nav-bar">
<ul className='navigation'>
<li className='menu-items'>
<a href="/" className='button drop-down red'>Shop <DropDownIcon className='drop-icon'/></a>
<a href="/" className='button'>Equipment for Crossfit</a>
<a href="/" className='button'>New Gear</a>
<a href="/" className='button'>Barbells</a>
<a href="/" className='button'>Plates</a>
<a href="/" className='button'>Rigs and Racks</a>
<a href="/" className='button'>Shoes</a>
<a href="/" className='button'>Apparel</a>
<a href="/" className='button'>3 Ships Free</a>
<a href="/" className='button'>Zeus</a>
<a href="/" className='button drop-down'>The Index</a>
</li>
</ul>
</div>
</div>
</div>
)
}
export default Header
Here is the styling I am currently applying:
.header {
min-width: 100%;
margin: 0;
padding: 0;
}
.header-top {
background-color: white;
display: flex;
height: 2.5rem;
width: 100%;
}
.top-logo {
position: relative;
margin-left: 3rem;
}
.space {
flex-grow: 1;
}
.small-logo {
padding-top: 0.5em;
position: relative;
font-size: larger;
color: rgb(133, 133, 133)
}
.link-container {
display: flex;
/*border: 1px solid red;*/
margin-right: 3rem;
}
.link-wrap {
/*border: 1px solid green;*/
font-size: 14px;
padding-left: 1rem;
padding-top: 0.75rem;
}
.link-wrap a {
text-decoration: none;
color:#666666;
cursor: pointer;
}
/* Large section of header, black background */
.header-middle {
background-color: black;
height: 7rem;
display: flex;
}
/* Big LEVIATHAN text */
.middle-logo {
/*border: 1px solid red;*/
position: relative;
margin-left: 3rem;
display: flex;
justify-content: center;
align-items: center;
cursor: co;
}
.big-logo {
font-size: 48px;
/*padding-top: 2rem;*/
position: relative;
color: white;
}
.big-logo:hover {
color: rgb(210, 0, 0);
}
.search-container {
position: relative;
width: 40%;
display: flex;
flex-basis: 60%;
margin-left: 3rem;
align-items: center;
justify-content: center;
}
/*This is what has the appearance of the search bar*/
.search-wrapper {
min-width:100%;
height: 35%;
position: relative;
background-color: white;
display: flex;
flex-basis: 50%;
}
.search-icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
}
.search-icon {
color: black;
font-size: 20px;
}
/*This is the actual search bar tucked inside*/
.search {
width: 100%;
height: 100%;
border: none;
outline: none;
margin-left: 1em;
font-size: 17px;
}
.search::placeholder {
color:rgb(94, 94, 94);
}
/* This holds onto both our daily shipping deals button */
/* and our text slideshow */
.shipping-deals-container{
width: 18em;
margin-left: 2.5em;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
/*border: 2px solid rgb(136, 77, 255);*/
}
.shipping-deals-button {
width: 65%;
height: 44%;
background-color: rgb(234, 2, 2);
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.5em;
}
.button-container {
width: 100%;
height: 50%;
/*border: 2px solid magenta;*/
}
.deals-text {
color: white;
font-size: 12px;
position: relative;
text-align: center;
align-items: stretch;
width: 100%;
}
.text-container {
/*border: 2px solid rgb(20, 182, 11);*/
width: 100%;
height: 50%;
}
.text-slideshow {
color: white;
width: 100%;
height: 50%;
font-size: 12px;
}
.shipping-deals-text {
transition: opacity 1s;
opacity: 1;
font-size: 13px;
}
.out {
opacity: 0;
transition: opacity 1s;
}
.shipping-deals-text-red{
color: red;
}
.navigation {
display: flex;
align-items:flex-start;
height: 3rem;
}
.menu-items {
height: 100%;
margin-left: 1.5rem;
padding-right: 1.5rem;
display: flex;
align-items: flex-start;
flex: 1;
}
ul {
list-style-type: none;
background-color: #333333;
}
.button {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-decoration: none;
color: white;
text-transform: uppercase;
white-space: nowrap;
padding: 1em;
font-weight: bold;
}
.button:hover {
color:rgb(210, 0, 0)
}
.red {
background-color: rgb(210, 0, 0);
}
.red:hover {
color: white;
}
.drop-icon {
font-size: 25px;
}
.icons-right {
height: 50%;
margin-top: 2em;
min-width: 10%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
.login-pic {
color: white;
font-size: 20px;
}
.shopping-cart {
color: white;
font-size: 20px;
margin-left: 1rem;
}
.icons-right span {
color: white;
margin-left: 0.5em;
}
#media (max-width: 1025px) {
.shipping-deals-container {
display: none;
}
.header-top {
display: none;
}
.header-middle {
height: 50%;
}
.search-wrapper {
border: 2px solid white;
height: 2rem;
}
.icons-right {
margin-bottom: 2rem;
}
}
I have tried altering the width of my body, and html, but nothing seems to be giving me the solution I am looking for

With width: 100% on .header it shrinks the header the way you want it. That seems to be correct actually.
The element that prevents shrinking is <li class="menu-items"></li> because of display: flex;. Flexbox is by default not wrapping (flex-wrap: nowrap;).
Add flex-wrap. wrap; and you'll see everything will shrink with fit-content or width: 100%;
Hope this helps.
On another note: You shouldn't use <li> (List-Element) as the list. Thats what <ul> (Unsorted list) is for.
It should look more like this ->
<ul>
<li>
Shop
</li>
<li>
Equipment for Crossfit
</li>
<li>
New Gear
</li>
<!-- ... -->
</ul>

my popup should show when score = 6, but i cant make it work

I want to make the popup show when score is equal to 6. and then when you press the button the page should reload. But i can't seem to make it work. i tried the function with the if-statement but it doens't work. so i don't know what to do or how to do it. so i would enjoy it if someone could help me out :)
//Function for the dropdown content
function dropdownTips() {
document.getElementById("mydropdown").classList.toggle("show");
}
window.addEventListener("click", function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdowncontent");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
});
//the game
// Declares global variables
let score = 0,
cardToMatch = null;
// Calls `flipCard` on any click
window.addEventListener("click", flipCard);
// Defines the click listener
function flipCard(event) {
// Identifies the card where the click happened
const card = event.target.closest(".card");
// Ignores irrelevant/invalid clicks
if (!card || card.classList.contains("open")) {
return;
}
// A valid click always opens the card
card.classList.add("open");
// If this is the 1st card of 2, remember it
if (cardToMatch === null) {
cardToMatch = card;
} else {
// If it's the 2nd card, compare types
// If they match...
if (card.dataset.type === cardToMatch.dataset.type) {
// ...Increment score and show it in the DOM
updateScoreDisplay(++score);
}
// If they don't...
else {
// ...Flip both cards back over
setTimeout((first, second) => {
first.classList.remove("open");
second.classList.remove("open");
}, 3000, card, cardToMatch);
// Either way, next click will be the 1st of 2
}
cardToMatch = null;
}
}
function updateScoreDisplay(newScore) {
// Syncs the user-displayed value w/ score
const element = document.querySelector(".score span");
element.textContent = newScore;
}
// popup section
let popup = document.querySelector(".popup");
popup = function() {
if (score === 6) {
popup.style.display ="block";
console.log("hello");
}
}
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
header {
background-color:#00005e;
height: 50px;
position: relative;
}
header h1 {
color: white;
position: absolute;
top: 10%;
left: 38%;
right: 40%;
width: 355px;
}
/*The 'tips?' button and the drop down content*/
header button {
display: inline-flex;
position:absolute;
align-items: center;
right: 2%;
top: 15%;
bottom: 15%;
padding: 10px 20px;
font-size: 20px;
background-color:white;
color: #00005e;
border-radius: 10px;
cursor: pointer;
border-color: transparent;
}
header button:hover {
opacity: 80%;
}
.dropdowncontent {
display: none;
position: absolute;
right: 0%;
top: 100%;
background-color:#010169;
min-width: 160px;
max-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-bottom-left-radius: 20px;
z-index: 100;
}
.dropdowncontent li {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.advise{
font-size: 19px;
}
.passwordtips {
font-size: 30px;
left: 20%;
}
.show {
display:block;
}
/*The link in the dropdowncontent*/
a {
text-decoration: underline;
color: white;
}
a:hover {
cursor: pointer;
}
/*The score counter*/
.score {
color: #01016e;
display: flex;
justify-content: center;
margin: 10px;
font-size: 30px;
}
/*The game section*/
.sectionOne {
max-width: 1100px;
height: 550px;
display: flex;
justify-content: space-around;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border-radius: 7px;
border-color: #00005e;
border-style: solid;
border-width: 5px;
position: relative;
}
/*The sections content*/
.wrapper {
width: 99%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 183px;
margin-top: 7px;
}
.card{
background-color: #01016e;
color: white;
margin: 10px 10px;
height: 150px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
border-radius: 5px;
}
.card h2{
padding: 2px;
transform: scale(-1,1);
}
.card:hover {
cursor: pointer;
}
.open{
animation: flip .5s;
animation-fill-mode: forwards;
transform-style: preserve-3d;
}
#keyframes flip {
from {
background: #00005e;
font-size: 0;
}
to{
background: rgb(20, 73, 185);
font-size:17px;
transform: rotateY( 180deg );
}
}
/* pop up section */
.popup {
position: absolute;
background-color: white;
width: 700px;
height: 500px;
z-index: 100;
right: 50.5vh;
top: 14%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-radius: 8px;
display: none;
}
.congrats {
position: relative;
display: flex;
justify-content: center;
height: 40px;
top: 20%;
color: #00005e;
font-size: 40px;
}
.matches {
position: relative;
height: 40px;
top: 35%;
color: #00005e;
display: flex;
justify-content: center;
font-size: 30px;
}
.playAgain {
position: absolute;
height: 40px;
width: 150px;
top: 65%;
left: 40%;
cursor: pointer;
color: white;
background-color: #00005e;
border-style: none;
font-size: 20px;
border-radius: 5px;
}
/*The 'DID YOU KNOW' over the ticker*/
.facts {
display: flex;
justify-content: space-around;
margin-top: 15px;
font-size: 20px;
color: #00005e;
}
/*The facts ticker*/
.tcontainer {
max-width: 1100px;
margin-top: 20px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
z-index: 1000;
}
.ticker-wrap {
width: 100%;
padding-left: 100%;
background-color: #00005e;
}
#keyframes ticker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
.ticker-move {
display: inline-block;
white-space: nowrap;
padding-right: 100%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 55s;
}
.ticker-move:hover{
animation-play-state: paused;
}
.ticker-item{
display: inline-block;
padding-top: 5px;
padding-bottom: 2px;
padding-right: 3em;
color: white;
min-height: 40px;
font-size: 25px;
}
/*The pause button for the ticker*/
.pause {
display: flex;
justify-content: center;
margin-top: 10px;
}
.pausebutton {
padding: 5px;
border-radius: 3px;
background-color: #00005e;
color: white;
border-style: none;
cursor: pointer;
}
.pausebutton:hover {
background-color: #3c3b6e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<title>The Password Game</title>
</head>
<body>
<header>
<h1>THE PASSWORD GAME</h1>
<div class="dropdown">
<button onclick="dropdownTips()" class="dropbtn">TIPS?</button>
<div class="dropdowncontent" id="mydropdown" >
<ul>
<li class="passwordtips">Tips for making strong passwords: </li>
<li class="advise">1. Use 16 characters or more (use both uppercase and lowercase letters, number and symbols.)</li>
<li class="advise">2. Never use the same password twice.</li>
<li class="advise">3. Use a password manager.</li>
<li class="advise">4. Don't write your passwords down on paper.</li>
<li class="advise">5. Don't share your passwords with others.</li>
<li class="advise">6. Change your password after a breach.</li>
<li class="advise">7. Sign up for data breach notifications. (like haveibeenpwned.com).</li>
<li class="advise">8. Check your accounts regularly for any suspicious activity. </li>
</ul>
</div>
</div>
</header>
<div class="score">Score:<span> 0</span></div>
<section class="sectionOne">
<div class="wrapper" id="card-deck">
<div class="card" data-type="1"><h2>What information should you NEVER use in a password?</h2></div>
<div id="answerSix" class="card" data-type="6"><h2>1 log in</h2></div>
<div id="cardThree" class="card" data-type="3"><h2>When should you ALWAYS change your password?</h2></div>
<div id="anserFive" class="card" data-type="5"><h2>suspicious activity</h2></div>
<div id="cardTwo" class="card" data-type="2"><h2>Who is it okay to tell your password to?</h2></div>
<div id="answerFour" class="card" data-type="4"><h2>16</h2></div>
<div id="answerThree" class="card" data-type="3"><h2>After a data breach</h2></div>
<div id="answerTwo" class="card" data-type="2"><h2>No one</h2></div>
<div id="CardSix" class="card" data-type="6"><h2>For how many log ins is it okay to use the same password?</h2></div>
<div id="cardFour" class="card" data-type="4"><h2>How many characters should you AT LEAST use in a password?</h2></div>
<div class="card" data-card="firstSet" data-type="1"><h2>Name and Birthday</h2></div>
<div id="cardFive" class="card" data-type="5"><h2>What should you regularly look for in your accounts?</h2></div>
</div>
</section>
<section class="popup">
<h3 class="congrats">Congratulations!</h3>
<h3 class="matches">You got 6/6 matches</h3>
<button class="playAgain">Play again?</button>
</section>
<div class="facts">
<h2>DID YOU KNOW?</h2>
</div>
<div class="tcontainer"><div class="ticker-wrap"><div class="ticker-move">
<div class="ticker-item">There is a hacker attack every 39 seconds.</div>
<div class="ticker-item">90% of passwords can be cracked in less than 6 hours.</div>
<div class="ticker-item">80% of hacking related breaches are linked to insufficient passwords.</div>
<div class="ticker-item">59% use their name or birthday in their password.</div>
<div class="ticker-item">6.850.000 passwords are getting hacked each day.</div>
</div></div></div>
<div class="pause">
<p>Hold your mouse over to pause</p>
</div>
<script src="javascript/javascript.js" ></script>
</body>
</html>

you have this code which doesnt run when score is incremented
popup = function() {
if (score === 6) {
popup.style.display ="block";
console.log("hello");
}
}
so i've created a function to check the score like this
let popup = document.querySelector("#popup");
function showPopup() {
if (score === 6) {
popup.style.display ="block";
console.log("hello");
}
}
And call the showPopup function when score is added like this
if (card.dataset.type === cardToMatch.dataset.type) {
// ...Increment score and show it in the DOM
updateScoreDisplay(++score);
showPopup();
}
full code :
//Function for the dropdown content
let popup = document.querySelector("#popup");
function showPopup() {
if (score > 0) {
popup.style.display ="block";
console.log("hello");
}
}
function dropdownTips() {
document.getElementById("mydropdown").classList.toggle("show");
}
window.addEventListener("click", function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdowncontent");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
});
//the game
// Declares global variables
let score = 0,
cardToMatch = null;
// Calls `flipCard` on any click
window.addEventListener("click", flipCard);
// Defines the click listener
function flipCard(event) {
// Identifies the card where the click happened
const card = event.target.closest(".card");
// Ignores irrelevant/invalid clicks
if (!card || card.classList.contains("open")) {
return;
}
// A valid click always opens the card
card.classList.add("open");
// If this is the 1st card of 2, remember it
if (cardToMatch === null) {
cardToMatch = card;
} else {
// If it's the 2nd card, compare types
// If they match...
if (card.dataset.type === cardToMatch.dataset.type) {
// ...Increment score and show it in the DOM
updateScoreDisplay(++score);
showPopup();
}
// If they don't...
else {
// ...Flip both cards back over
setTimeout((first, second) => {
first.classList.remove("open");
second.classList.remove("open");
}, 3000, card, cardToMatch);
// Either way, next click will be the 1st of 2
}
cardToMatch = null;
}
}
function updateScoreDisplay(newScore) {
// Syncs the user-displayed value w/ score
const element = document.querySelector(".score span");
element.textContent = newScore;
}
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
header {
background-color:#00005e;
height: 50px;
position: relative;
}
header h1 {
color: white;
position: absolute;
top: 10%;
left: 38%;
right: 40%;
width: 355px;
}
/*The 'tips?' button and the drop down content*/
header button {
display: inline-flex;
position:absolute;
align-items: center;
right: 2%;
top: 15%;
bottom: 15%;
padding: 10px 20px;
font-size: 20px;
background-color:white;
color: #00005e;
border-radius: 10px;
cursor: pointer;
border-color: transparent;
}
header button:hover {
opacity: 80%;
}
.dropdowncontent {
display: none;
position: absolute;
right: 0%;
top: 100%;
background-color:#010169;
min-width: 160px;
max-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-bottom-left-radius: 20px;
z-index: 100;
}
.dropdowncontent li {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.advise{
font-size: 19px;
}
.passwordtips {
font-size: 30px;
left: 20%;
}
.show {
display:block;
}
/*The link in the dropdowncontent*/
a {
text-decoration: underline;
color: white;
}
a:hover {
cursor: pointer;
}
/*The score counter*/
.score {
color: #01016e;
display: flex;
justify-content: center;
margin: 10px;
font-size: 30px;
}
/*The game section*/
.sectionOne {
max-width: 1100px;
height: 550px;
display: flex;
justify-content: space-around;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border-radius: 7px;
border-color: #00005e;
border-style: solid;
border-width: 5px;
position: relative;
}
/*The sections content*/
.wrapper {
width: 99%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 183px;
margin-top: 7px;
}
.card{
background-color: #01016e;
color: white;
margin: 10px 10px;
height: 150px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
border-radius: 5px;
}
.card h2{
padding: 2px;
transform: scale(-1,1);
}
.card:hover {
cursor: pointer;
}
.open{
animation: flip .5s;
animation-fill-mode: forwards;
transform-style: preserve-3d;
}
#keyframes flip {
from {
background: #00005e;
font-size: 0;
}
to{
background: rgb(20, 73, 185);
font-size:17px;
transform: rotateY( 180deg );
}
}
/* pop up section */
#popup {
position: absolute;
background-color: white;
width: 700px;
height: 500px;
z-index: 100;
right: 50.5vh;
top: 14%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-radius: 8px;
display: none;
}
.congrats {
position: relative;
display: flex;
justify-content: center;
height: 40px;
top: 20%;
color: #00005e;
font-size: 40px;
}
.matches {
position: relative;
height: 40px;
top: 35%;
color: #00005e;
display: flex;
justify-content: center;
font-size: 30px;
}
.playAgain {
position: absolute;
height: 40px;
width: 150px;
top: 65%;
left: 40%;
cursor: pointer;
color: white;
background-color: #00005e;
border-style: none;
font-size: 20px;
border-radius: 5px;
}
/*The 'DID YOU KNOW' over the ticker*/
.facts {
display: flex;
justify-content: space-around;
margin-top: 15px;
font-size: 20px;
color: #00005e;
}
/*The facts ticker*/
.tcontainer {
max-width: 1100px;
margin-top: 20px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
z-index: 1000;
}
.ticker-wrap {
width: 100%;
padding-left: 100%;
background-color: #00005e;
}
#keyframes ticker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
.ticker-move {
display: inline-block;
white-space: nowrap;
padding-right: 100%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 55s;
}
.ticker-move:hover{
animation-play-state: paused;
}
.ticker-item{
display: inline-block;
padding-top: 5px;
padding-bottom: 2px;
padding-right: 3em;
color: white;
min-height: 40px;
font-size: 25px;
}
/*The pause button for the ticker*/
.pause {
display: flex;
justify-content: center;
margin-top: 10px;
}
.pausebutton {
padding: 5px;
border-radius: 3px;
background-color: #00005e;
color: white;
border-style: none;
cursor: pointer;
}
.pausebutton:hover {
background-color: #3c3b6e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<title>ok</title>
</head>
<body>
<header>
<h1>THE PASSWORD GAME</h1>
<div class="dropdown">
<button onclick="dropdownTips()" class="dropbtn">TIPS?</button>
<div class="dropdowncontent" id="mydropdown" >
<ul>
<li class="passwordtips">Tips for making strong passwords: </li>
<li class="advise">1. Use 16 characters or more (use both uppercase and lowercase letters, number and symbols.)</li>
<li class="advise">2. Never use the same password twice.</li>
<li class="advise">3. Use a password manager.</li>
<li class="advise">4. Don't write your passwords down on paper.</li>
<li class="advise">5. Don't share your passwords with others.</li>
<li class="advise">6. Change your password after a breach.</li>
<li class="advise">7. Sign up for data breach notifications. (like haveibeenpwned.com).</li>
<li class="advise">8. Check your accounts regularly for any suspicious activity. </li>
</ul>
</div>
</div>
</header>
<div class="score">Score:<span> 0</span></div>
<section class="sectionOne">
<div class="wrapper" id="card-deck">
<div class="card" data-type="1"><h2>What information should you NEVER use in a password?</h2></div>
<div id="answerSix" class="card" data-type="6"><h2>1 log in</h2></div>
<div id="cardThree" class="card" data-type="3"><h2>When should you ALWAYS change your password?</h2></div>
<div id="anserFive" class="card" data-type="5"><h2>suspicious activity</h2></div>
<div id="cardTwo" class="card" data-type="2"><h2>Who is it okay to tell your password to?</h2></div>
<div id="answerFour" class="card" data-type="4"><h2>16</h2></div>
<div id="answerThree" class="card" data-type="3"><h2>After a data breach</h2></div>
<div id="answerTwo" class="card" data-type="2"><h2>No one</h2></div>
<div id="CardSix" class="card" data-type="6"><h2>For how many log ins is it okay to use the same password?</h2></div>
<div id="cardFour" class="card" data-type="4"><h2>How many characters should you AT LEAST use in a password?</h2></div>
<div class="card" data-card="firstSet" data-type="1"><h2>Name and Birthday</h2></div>
<div id="cardFive" class="card" data-type="5"><h2>What should you regularly look for in your accounts?</h2></div>
</div>
</section>
<section id="popup">
<h3 class="congrats">Congratulations!</h3>
<h3 class="matches">You got 6/6 matches</h3>
<button class="playAgain">Play again?</button>
</section>
<div class="facts">
<h2>DID YOU KNOW?</h2>
</div>
<div class="tcontainer"><div class="ticker-wrap"><div class="ticker-move">
<div class="ticker-item">There is a hacker attack every 39 seconds.</div>
<div class="ticker-item">90% of passwords can be cracked in less than 6 hours.</div>
<div class="ticker-item">80% of hacking related breaches are linked to insufficient passwords.</div>
<div class="ticker-item">59% use their name or birthday in their password.</div>
<div class="ticker-item">6.850.000 passwords are getting hacked each day.</div>
</div></div></div>
<div class="pause">
<p>Hold your mouse over to pause</p>
</div>
</body>
</html>
And i changed the popup section to id instead of class like this
<section id="popup">

This should work:
//Function for the dropdown content
function dropdownTips() {
document.getElementById("mydropdown").classList.toggle("show");
}
window.addEventListener("click", function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdowncontent");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
});
//the game
// Declares global variables
let score = 0,
cardToMatch = null;
// Calls `flipCard` on any click
window.addEventListener("click", flipCard);
// Defines the click listener
function flipCard(event) {
// Identifies the card where the click happened
const card = event.target.closest(".card");
// Ignores irrelevant/invalid clicks
if (!card || card.classList.contains("open")) {
return;
}
// A valid click always opens the card
card.classList.add("open");
// If this is the 1st card of 2, remember it
if (cardToMatch === null) {
cardToMatch = card;
} else {
// If it's the 2nd card, compare types
// If they match...
if (card.dataset.type === cardToMatch.dataset.type) {
// ...Increment score and show it in the DOM
updateScoreDisplay(++score);
}
// If they don't...
else {
// ...Flip both cards back over
setTimeout((first, second) => {
first.classList.remove("open");
second.classList.remove("open");
}, 3000, card, cardToMatch);
// Either way, next click will be the 1st of 2
}
cardToMatch = null;
}
}
function updateScoreDisplay(newScore) {
// Syncs the user-displayed value w/ score
const element = document.querySelector(".score span");
element.textContent = newScore;
}
// popup section
setInterval(function() {if (score==6) {document.getElementById("popup").style.display = "block";}},1000);
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
header {
background-color:#00005e;
height: 50px;
position: relative;
}
header h1 {
color: white;
position: absolute;
top: 10%;
left: 38%;
right: 40%;
width: 355px;
}
/*The 'tips?' button and the drop down content*/
header button {
display: inline-flex;
position:absolute;
align-items: center;
right: 2%;
top: 15%;
bottom: 15%;
padding: 10px 20px;
font-size: 20px;
background-color:white;
color: #00005e;
border-radius: 10px;
cursor: pointer;
border-color: transparent;
}
header button:hover {
opacity: 80%;
}
.dropdowncontent {
display: none;
position: absolute;
right: 0%;
top: 100%;
background-color:#010169;
min-width: 160px;
max-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-bottom-left-radius: 20px;
z-index: 100;
}
.dropdowncontent li {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.advise{
font-size: 19px;
}
.passwordtips {
font-size: 30px;
left: 20%;
}
.show {
display:block;
}
/*The link in the dropdowncontent*/
a {
text-decoration: underline;
color: white;
}
a:hover {
cursor: pointer;
}
/*The score counter*/
.score {
color: #01016e;
display: flex;
justify-content: center;
margin: 10px;
font-size: 30px;
}
/*The game section*/
.sectionOne {
max-width: 1100px;
height: 550px;
display: flex;
justify-content: space-around;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border-radius: 7px;
border-color: #00005e;
border-style: solid;
border-width: 5px;
position: relative;
}
/*The sections content*/
.wrapper {
width: 99%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 183px;
margin-top: 7px;
}
.card{
background-color: #01016e;
color: white;
margin: 10px 10px;
height: 150px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
border-radius: 5px;
}
.card h2{
padding: 2px;
transform: scale(-1,1);
}
.card:hover {
cursor: pointer;
}
.open{
animation: flip .5s;
animation-fill-mode: forwards;
transform-style: preserve-3d;
}
#keyframes flip {
from {
background: #00005e;
font-size: 0;
}
to{
background: rgb(20, 73, 185);
font-size:17px;
transform: rotateY( 180deg );
}
}
/* pop up section */
.popup {
position: absolute;
background-color: white;
width: 700px;
height: 500px;
z-index: 100;
right: 50.5vh;
top: 14%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-radius: 8px;
display: none;
}
.congrats {
position: relative;
display: flex;
justify-content: center;
height: 40px;
top: 20%;
color: #00005e;
font-size: 40px;
}
.matches {
position: relative;
height: 40px;
top: 35%;
color: #00005e;
display: flex;
justify-content: center;
font-size: 30px;
}
.playAgain {
position: absolute;
height: 40px;
width: 150px;
top: 65%;
left: 40%;
cursor: pointer;
color: white;
background-color: #00005e;
border-style: none;
font-size: 20px;
border-radius: 5px;
}
/*The 'DID YOU KNOW' over the ticker*/
.facts {
display: flex;
justify-content: space-around;
margin-top: 15px;
font-size: 20px;
color: #00005e;
}
/*The facts ticker*/
.tcontainer {
max-width: 1100px;
margin-top: 20px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
z-index: 1000;
}
.ticker-wrap {
width: 100%;
padding-left: 100%;
background-color: #00005e;
}
#keyframes ticker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
.ticker-move {
display: inline-block;
white-space: nowrap;
padding-right: 100%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 55s;
}
.ticker-move:hover{
animation-play-state: paused;
}
.ticker-item{
display: inline-block;
padding-top: 5px;
padding-bottom: 2px;
padding-right: 3em;
color: white;
min-height: 40px;
font-size: 25px;
}
/*The pause button for the ticker*/
.pause {
display: flex;
justify-content: center;
margin-top: 10px;
}
.pausebutton {
padding: 5px;
border-radius: 3px;
background-color: #00005e;
color: white;
border-style: none;
cursor: pointer;
}
.pausebutton:hover {
background-color: #3c3b6e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<title>The Password Game</title>
</head>
<body>
<header>
<h1>THE PASSWORD GAME</h1>
<div class="dropdown">
<button onclick="dropdownTips()" class="dropbtn">TIPS?</button>
<div class="dropdowncontent" id="mydropdown" >
<ul>
<li class="passwordtips">Tips for making strong passwords: </li>
<li class="advise">1. Use 16 characters or more (use both uppercase and lowercase letters, number and symbols.)</li>
<li class="advise">2. Never use the same password twice.</li>
<li class="advise">3. Use a password manager.</li>
<li class="advise">4. Don't write your passwords down on paper.</li>
<li class="advise">5. Don't share your passwords with others.</li>
<li class="advise">6. Change your password after a breach.</li>
<li class="advise">7. Sign up for data breach notifications. (like haveibeenpwned.com).</li>
<li class="advise">8. Check your accounts regularly for any suspicious activity. </li>
</ul>
</div>
</div>
</header>
<div class="score">Score:<span> 0</span></div>
<section class="sectionOne">
<div class="wrapper" id="card-deck">
<div class="card" data-type="1"><h2>What information should you NEVER use in a password?</h2></div>
<div id="answerSix" class="card" data-type="6"><h2>1 log in</h2></div>
<div id="cardThree" class="card" data-type="3"><h2>When should you ALWAYS change your password?</h2></div>
<div id="anserFive" class="card" data-type="5"><h2>suspicious activity</h2></div>
<div id="cardTwo" class="card" data-type="2"><h2>Who is it okay to tell your password to?</h2></div>
<div id="answerFour" class="card" data-type="4"><h2>16</h2></div>
<div id="answerThree" class="card" data-type="3"><h2>After a data breach</h2></div>
<div id="answerTwo" class="card" data-type="2"><h2>No one</h2></div>
<div id="CardSix" class="card" data-type="6"><h2>For how many log ins is it okay to use the same password?</h2></div>
<div id="cardFour" class="card" data-type="4"><h2>How many characters should you AT LEAST use in a password?</h2></div>
<div class="card" data-card="firstSet" data-type="1"><h2>Name and Birthday</h2></div>
<div id="cardFive" class="card" data-type="5"><h2>What should you regularly look for in your accounts?</h2></div>
</div>
</section>
<section class="popup" id="popup">
<h3 class="congrats">Congratulations!</h3>
<h3 class="matches">You got 6/6 matches</h3>
<button class="playAgain">Play again?</button>
</section>
<div class="facts">
<h2>DID YOU KNOW?</h2>
</div>
<div class="tcontainer"><div class="ticker-wrap"><div class="ticker-move">
<div class="ticker-item">There is a hacker attack every 39 seconds.</div>
<div class="ticker-item">90% of passwords can be cracked in less than 6 hours.</div>
<div class="ticker-item">80% of hacking related breaches are linked to insufficient passwords.</div>
<div class="ticker-item">59% use their name or birthday in their password.</div>
<div class="ticker-item">6.850.000 passwords are getting hacked each day.</div>
</div></div></div>
<div class="pause">
<p>Hold your mouse over to pause</p>
</div>
<script src="javascript/javascript.js" ></script>
</body>
</html>
The reason why your code wasn't working was because the code you had only checked if the score was 6 at the start of the game. I fixed this by using the function setInterval which checked if the user had finished the game every second.
More Explanations
If you would like to learn more about the setInterval function, visit:
https://www.w3schools.com/jsref/met_win_setinterval.asp

Very strange behaivour. Why are my radio buttons not checking when I click them?

Hi guys, any idea why when I click my radio buttons they do not work? I have used radio buttons on other components and they work fine. I'm using Vue.
The radio buttons are the same name, and if I add checked to them, they do indeed check. However even when one is checked, it will not allow me to click and check another.
template:
`<template >
<div class="desktop-new-user">
<div id="MyFirstSlideshow">
<div class="eg-slideshow">
<transition name="fade">
<slide>
<div class="desktop-new-user__text-wrapper">
<h1>Starting your career has never been so easy.</h1>
<p>All graduate and intern opportunities are now in one place</p>
<div class="desktop-new-user__input-wrapper">
<div class="desktop-new-user__input-wrapper__radio-wrapper">
<div class="desktop-new-user__input-wrapper__radio-wrapper__option-1">
<input
type="radio"
name="new-user-job-type"
value="graduate"
class="desktop-new-user__input-wrapper__radio-wrapper__radio-input"
/>
</div>
<div class="desktop-new-user__input-wrapper__radio-wrapper__option-2">
<input
type="radio"
name="new-user-job-type"
value="intern"
class="desktop-new-user__input-wrapper__radio-wrapper__radio-input"
/>
</div>
</div>
<input
type="text"
class="desktop-new-user__input-wrapper__input-text"
placeholder="What are you interested in?"
/>
<input
type="text"
class="desktop-new-user__input-wrapper__input-text"
placeholder="Where would you like to work?"
/>
<button class="desktop-new-user__input-wrapper__btn-search">
<p>Search</p>
</button>
</div>
</div>
<div class="desktop-new-user__img-wrapper">
<img src="https://via.placeholder.com/300/>" alt />
</div>
</slide>
</transition>
<transition name="fade">
<slide enter="bounceInRight" leave="fadeOut">
<div class="desktop-new-user__text-wrapper">
<h1>Create a profile to get better career suggestions</h1>
<p>All graduate and intern opportunities are now in one place</p>
</div>
<div class="desktop-new-user__img-wrapper">
<img src="https://via.placeholder.com/300/>" alt />
</div>
</slide>
</transition>
<transition name="fade">
<slide enter="fadeIn">
<div class="desktop-new-user__text-wrapper">
<h1>Coming soon to STU!</h1>
<p>All graduate and intern opportunities are now in one place</p>
</div>
<div class="desktop-new-user__img-wrapper">
<img src="https://via.placeholder.com/300/>" alt />
</div>
</slide>
</transition>
</div>
</div>
</div>
</template>`
script:
<script>
import { Slideshow } from "eagle.js";
export default {
name: "DesktopNewUser",
mixins: [Slideshow],
methods: {
updateJobSelector: function() {
const option1left = this.$refs.option1.getBoundingClientRect().left;
const option2left = this.$refs.option2.getBoundingClientRect().left;
if (this.jobType === "graduate") {
this.$refs.jobTypeSelector.style.left = "0";
this.$refs.pGraduate.style.color = "#FFFFFFff";
this.$refs.pIntern.classList.add("p-blue");
} else if (this.jobType === "intern") {
this.$refs.jobTypeSelector.style.left = "50%";
this.$refs.pIntern.classList.remove("p-blue");
this.$refs.pIntern.style.color = "#FFFFFFff";
this.$refs.pGraduate.style.color = "#6734e9";
}
}
},
data: function() {
return {
jobType: "graduate"
};
}
};
</script>
styling:
<style lang="scss">
#import "../../../styles/_variables.scss";
.desktop-new-user {
width: 100%;
height: 80vh;
position: relative;
&__text-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 50%;
width: 100%;
background-color: pink;
justify-content: space-evenly;
& h1 {
width: 60%;
}
& p {
font-size: 2rem;
color: $colour-grey-light;
}
}
&__input-wrapper {
width: 100%;
background-color: purple;
display: flex;
flex-direction: column;
height: 50%;
display: flex;
align-items: flex-start;
justify-content: center;
position: relative;
&__input-text {
&::placeholder {
font-size: 2rem;
}
height: 6rem;
width: 30%;
border-radius: 2.5rem;
padding-left: 2rem;
font-size: 2rem;
border: 0.1rem solid $colour1;
transition: all 0.5s;
margin-bottom: 2rem;
&:focus {
border: 0.1rem solid $colour2;
}
}
&__radio-wrapper {
display: flex;
height: 10rem;
justify-content: center;
align-items: center;
width: 30%;
}
&__btn-search {
#include gradientbg;
width: 15rem;
height: 6rem;
font-size: 2rem;
border-radius: 2.5rem;
padding: 1rem 2rem;
transition: all 0.2s;
border: none;
color: $colour4;
cursor: pointer;
border: solid 0.1rem transparent;
overflow: hidden;
position: relative;
&:before {
content: "";
width: 100%;
height: 100%;
background-color: #fff;
position: absolute;
transition: all 0.2s ease;
top: 0;
left: 0;
border-radius: 2rem;
transform: translateX(-100%);
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
&:hover::before {
transform: translateX(0);
}
&:hover {
color: $colour1;
border: solid 0.1rem $colour1;
}
&:hover p {
color: $colour1;
}
& p {
text-align: center;
color: $colour4;
font-size: 2rem;
position: relative;
transition: all 0.2s ease;
z-index: 1;
}
}
}
}
#MyFirstSlideshow {
.eg-slideshow {
.eg-slide {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.eg-slide-content {
display: flex;
align-items: center;
justify-content: space-evenly;
text-align: left !important;
width: 100%;
height: 100%;
max-width: 80%;
margin: 0 auto;
}
}
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.25s ease-out;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>

align items on stretch to the center of the parent div

I tried to create a menu that stretches to full height on mobile screens. For the parent container I use a flexbox with flex-direction column and stretch the items on full screen height.
$(document).ready(() => {
$("#btnMenu").click(() => {
toggleMenu();
});
$(".navbarLink").click(() => {
if ($("#navbarItems").hasClass("activeNavbar")) {
toggleMenu();
}
});
});
function toggleMenu() {
$("#navbarItems").toggleClass("activeNavbar");
toggleMenuBtn();
}
function toggleMenuBtn() {
$("#btnMenu").toggleClass("activeMenuBtn");
}
body {
margin: 0;
}
.link {
text-decoration: none;
}
#navbar {
height: 60px;
top: 0;
padding-left: 200px;
padding-right: 200px;
position: sticky;
background: #1e222a;
}
#navbarItems {
height: 100%;
display: flex;
align-items: center;
}
#logoLink {
display: flex;
align-items: center;
}
#navbarItems .navbarItem:not(:first-child) {
margin-left: 30px;
}
.navbarItem {
background: #1e222a;
}
.navbarLink {
color: #ffffff;
}
.navbarLink:hover {
color: #3abcf3;
}
#btnMenuContainer {
height: 100%;
display: none;
}
#btnMenu {
cursor: pointer;
}
.menuBtnBar {
width: 35px;
height: 5px;
margin: 6px 0;
background-color: #ffffff;
transition: 0.4s;
}
.activeMenuBtn #barTop {
transform: rotate(-45deg) translate(-9px, 6px);
}
.activeMenuBtn #barCenter {
opacity: 0;
}
.activeMenuBtn #barBottom {
transform: rotate(45deg) translate(-8px, -8px);
}
#media(max-width: 1200px) {
#navbar {
padding-left: 150px;
padding-right: 150px;
}
}
#media(max-width: 1100px) {
#navbar {
padding-left: 0;
padding-right: 0;
}
#btnMenuContainer {
display: flex;
align-items: center;
}
#btnMenu {
margin-left: 20px;
}
#navbarItems {
margin-left: 0;
display: none;
}
#navbarItems.activeNavbar {
display: flex;
flex-direction: column;
align-items: stretch;
height: 100vh;
}
#logoLink {
display: inline-block;
}
.navbarItem {
flex: 1 1 100%;
align-items: center;
justify-content: center;
text-align: center;
}
#navbarItems .navbarItem:not(:first-child) {
margin-left: 0;
}
#navbarItems .navbarItem:not(:last-child) {
border-bottom: 1px solid #676767;
}
.navbarLink {
width: 100%;
height: 100%;
display: inline-block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<div id="btnMenuContainer">
<div id="btnMenu">
<div id="barTop" class="menuBtnBar"></div>
<div id="barCenter" class="menuBtnBar"></div>
<div id="barBottom" class="menuBtnBar"></div>
</div>
</div>
<div id="navbarItems">
<div class="navbarItem">
<a id="logoLink" class="link navbarLink" href="#">
<img class="img" src="https://cdn4.iconfinder.com/data/icons/32x32-free-design-icons/32/Ok.png">
</a>
</div>
<div class="navbarItem">
<a class="link navbarLink" href="#">
Link 2
</a>
</div>
<div class="navbarItem">
<a class="link navbarLink" href="#">
Link 3
</a>
</div>
</div>
</div>
When using align-items: stretch; how can I place the links (and the logo) back to center?
My second question is what can I use for height: 100vh; instead? I would like to keep it dynamic so maybe there is a better way than using a constant number?

It works fine. Check the code snippets and fiddle for further clarification.
Noe all links are center aligned and menu height takes the full height of the space available and there is no scroll any more.
My suggestion is to use 100vh for the height because it better than applying static value since 100vh is dynamic value.
https://jsfiddle.net/Sampath_Madhuranga/4uLb6rsw/7/
$(document).ready(() => {
$("#btnMenu").click(() => {
toggleMenu();
});
$(".navbarLink").click(() => {
if ($("#navbarItems").hasClass("activeNavbar")) {
toggleMenu();
}
});
});
function toggleMenu() {
$("#navbarItems").toggleClass("activeNavbar");
toggleMenuBtn();
}
function toggleMenuBtn() {
$("#btnMenu").toggleClass("activeMenuBtn");
}
body {
margin: 0;
}
.link {
text-decoration: none;
}
#navbar {
height: 60px;
top: 0;
padding-left: 200px;
padding-right: 200px;
position: sticky;
background: #1e222a;
}
#navbarItems {
height: 100%;
display: flex;
align-items: center;
}
#logoLink {
display: flex;
align-items: center;
}
#navbarItems .navbarItem:not(:first-child) {
margin-left: 30px;
}
.navbarItem {
background: #1e222a;
}
.navbarLink {
color: #ffffff;
}
.navbarLink:hover {
color: #3abcf3;
}
#btnMenuContainer {
height: 100%;
display: none;
}
#btnMenu {
cursor: pointer;
}
.menuBtnBar {
width: 35px;
height: 5px;
margin: 6px 0;
background-color: #ffffff;
transition: 0.4s;
}
.activeMenuBtn #barTop {
transform: rotate(-45deg) translate(-9px, 6px);
}
.activeMenuBtn #barCenter {
opacity: 0;
}
.activeMenuBtn #barBottom {
transform: rotate(45deg) translate(-8px, -8px);
}
#media(max-width: 1200px) {
#navbar {
padding-left: 150px;
padding-right: 150px;
}
}
#media(max-width: 1100px) {
#navbar {
padding-left: 0;
padding-right: 0;
}
#btnMenuContainer {
display: flex;
align-items: center;
}
#btnMenu {
margin-left: 20px;
}
#navbarItems {
margin-left: 0;
display: none;
}
#navbarItems.activeNavbar {
display: flex;
flex-direction: column;
align-items: stretch;
height: calc( 100vh - 60px);
}
#logoLink {
display: flex;
justify-content: center;
}
.navbarItem {
flex: 1 1 100%;
align-items: center;
justify-content: center;
text-align: center;
}
#navbarItems .navbarItem:not(:first-child) {
margin-left: 0;
}
#navbarItems .navbarItem:not(:last-child) {
border-bottom: 1px solid #676767;
}
.navbarLink {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<div id="btnMenuContainer">
<div id="btnMenu">
<div id="barTop" class="menuBtnBar"></div>
<div id="barCenter" class="menuBtnBar"></div>
<div id="barBottom" class="menuBtnBar"></div>
</div>
</div>
<div id="navbarItems">
<div class="navbarItem">
<a id="logoLink" class="link navbarLink" href="#">
<img class="img" src="https://cdn4.iconfinder.com/data/icons/32x32-free-design-icons/32/Ok.png">
</a>
</div>
<div class="navbarItem">
<a class="link navbarLink" href="#">
Link 2
</a>
</div>
<div class="navbarItem">
<a class="link navbarLink" href="#">
Link 3
</a>
</div>
</div>
</div>
Thanks.

Let .navbarLink also have a flex layout.
.navbarItem {
flex: 1 1 100%;
}
.navbarLink {
height: 100%;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
text-align: center;
}
By the way, here is a great resource that really helped me when I learned to use flexbox layouts. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Follow this link https://flexboxfroggy.com/ there is a really nice game which will teach you flexbox while playing in no time. After that you will be able to fix your navigation.

Spacing between images

I have 3 images side-by-side, I would like to know how to get some spacing between them. I have tried everything, margins, padding and I don't know what to do.
.content1 {
background-image: url("http://www.thefreeloves.com/prototype/test/wp-content/uploads/2014/02/album-title.jpg");
color: white;
text-align: center;
width: 100%;
height: 20%;
display: block;
float: left;
}
.text1 {
font-family: "Goudy Old Style", Optima, sans-serif;
font-size: 40px;
margin-bottom: 0;
margin-top: 45px;
}
.text2 {
font-size: 30px;
color: #6CB9D9;
}
.album1 {
float: left;
width: 31%;
text-align: center;
}
.album2 {
display: inline-block;
width: 31%;
text-align: center;
}
.album3 {
float: right;
width: 31%;
text-align: center;
}
.album {
width: 100%;
overflow: hidden;
background-color: #191919;
}
<div class="content1">
<h3 class="text1">Our Latest Album<span class="slash"> / </span><span class="text2">Fresh from the house of Music Club Band</span></h3>
</div>
<div class="album">
<div class="album1">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9133-650x385.jpg" alt="album1">
</div>
<div class="album2">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9099-650x385.jpg" alt="album2">
</div>
<div class="album3">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA0373-650x385.jpg" alt="album3" class="album4">
</div>
</div>

You set your wrapping div's to 31% but you didn't change the size of your images so they were flowing outside the wrappers. If you set Overflow: hidden; on your album1, album2 and album3 div's you'll see that your margins are working on the divs but you'll only see part of your images. if you set the imgs themselves to a width of 100% as below you'll see it works.
.content1 {
background-image: url("http://www.thefreeloves.com/prototype/test/wp-content/uploads/2014/02/album-title.jpg");
color: white;
text-align: center;
width: 100%;
height: 20%;
display: block;
float: left;
}
.text1 {
font-family: "Goudy Old Style", Optima, sans-serif;
font-size: 40px;
margin-bottom: 0;
margin-top: 45px;
}
.text2 {
font-size: 30px;
color: #6CB9D9;
}
.album1 {
float: left;
width: 31%;
text-align: center;
margin: 1%;
}
.album2 {
display: inline-block;
width: 31%;
text-align: center;
margin: 1%;
}
.album3 {
float: right;
width: 31%;
text-align: center;
margin: 1%;
}
.album {
width: 100%;
overflow: hidden;
background-color: #191919;
}
.album img { width: 100%; }
<div class="content1">
<h3 class="text1">Our Latest Album<span class="slash"> / </span><span class="text2">Fresh from the house of Music Club Band</span></h3>
</div>
<div class="album">
<div class="album1">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9133-650x385.jpg" alt="album1">
</div>
<div class="album2">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9099-650x385.jpg" alt="album2">
</div>
<div class="album3">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA0373-650x385.jpg" alt="album3" class="album4">
</div>
</div>

In each div tag, just place the following style = "margin-right: 20px;". So for example, for the first image, change it ot this
div style = "margin-right: 20px;" class="album1">

You don't need to use float, you can simply set the display of the albums to inline-block, and set the text-align of their parent to center. Note that the three images there are too wide to be in one line, so you'll have to adjust that yourself.
.album1 img, .album2 img, .album3 img {
//set img width and height here
}
.album1 {
display: inline-block;
//add padding/margin here
}
.album2 {
display: inline-block;
//add padding/margin here
}
.album3 {
display: inline-block;
//add padding/margin here
}
.album {
width: 100%;
overflow: hidden;
background-color: #191919;
text-align:center;
}