Develop Reference

my website is ok on iphone 6/7/8 but messes up on others, how do i fix

i have used media queries to make my website suitable for iphone /6/7/8 but when i change it to iphone x in dev tools, there is some black space in the right side and the same with other devices, how do i make my website suitable for all devices, what queries do i use and what am i doing wrong?
var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "-400px";
}
/* MEDIA CSS */
#media screen and (max -width: 700px) {
.nav-links ul li {
display: block;
}
.nav-links {
position: fixed;
background: #ffd700;
height: 100vh;
width: 12.5em;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
}
nav .fas {
display: block;
color: black;
margin: 1.625em;
font-size: 1.375em;
cursor: pointer;
position: relative;
right: 0.6em;
}
.nav-links ul {
padding: 1em;
}
.text-box h1 {
font-size: 4.3em;
}
nav img {
width: 20em;
position: relative;
top: 0.1em;
}
.player-info p {
padding-left: 0;
font-size: 0.8em;
padding-top: 0;
}
}
/* NORMAL CSS */
* {
margin: 0;
padding: 0;
font-family: "Nunito", sans-serif;
}
#font-face {
font-family: "BatmanForeverOutline";
font-style: normal;
font-weight: normal;
src: local("BatmanForeverOutline"), url("batmfo__.woff") format("woff");
}
#font-face {
font-family: "BatmanForeverAlternate";
font-style: normal;
font-weight: normal;
src: local("BatmanForeverAlternate"), url("batmfa__.woff") format("woff");
}
body {
background-color: black;
width: 100%;
}
em {
color: #ffd700;
font-style: normal;
font-family: "Nunito", sans-serif;
}
.header {
min-height: 100vh;
min-width: 200px;
background-image: linear-gradient(
rgba(105, 105, 105, 0.7),
rgba(105, 105, 105, 0.7)
);
background-position: center;
background-size: cover;
position: relative;
}
.main-texts {
min-height: 85vh;
background-image: url(images/background.jpeg);
background-position: center;
background-size: cover;
position: relative;
border-bottom: 0.1875em solid #ffd700;
}
.menu-header {
width: 100%;
background-color: #ffd700;
min-height: 15vh;
border-bottom: 0.1875em solid #fff;
}
nav img {
width: 25em;
}
nav {
display: flex;
padding: 2% 1%;
justify-content: space-between;
align-items: center;
}
.nav-links {
flex: 1;
text-align: center;
position: relative;
right: 12.5em;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 0.5em 3.125em;
position: relative;
}
.nav-links ul li a {
color: rgb(105, 105, 105);
text-decoration: none;
font-size: 1.375em;
transition: 0.5s;
}
.nav-links ul li::after {
content: "";
width: 0%;
height: 0.1875em;
background: white;
display: block;
margin: auto;
transition: 0.5s;
position: relative;
bottom: 0.1875em;
}
.nav-links ul li:hover::after {
width: 100%;
}
.nav-links ul li a:hover {
color: white;
}
.text-box {
color: #fff;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1 {
font-size: 5.625em;
font-family: "Nunito", sans-serif;
}
.text-box p {
margin: 0.625em 0 2.5em;
font-size: 1.5625em;
color: #fff;
}
.player-info {
margin: 0.625em 0 2.5em;
font-size: 1.5625em;
color: #fff;
}
.hero-btn {
display: inline-block;
text-decoration: none;
color: #fff;
border: 0.0625em solid #fff;
padding: 0.5em 1.25em;
font-size: 1.125em;
background: transparent;
border-radius: 0.1875em;
position: relative;
cursor: pointer;
}
.hero-btn:hover {
border: 0.0625em solid #fff;
background: #ffd700;
transition: 0.5s;
border-radius: 0.3125em;
}
nav .fas {
display: none;
}
.meet-me {
width: 80%;
text-align: center;
margin: auto;
padding-top: 6.25em;
}
.meet-me h1 {
font-size: 2.25em;
font-weight: 600;
color: #fff;
padding-bottom: 1.875em;
}
.meet-me p {
text-align: left;
padding-left: 9.375em;
}
footer {
width: 100%;
background-color: black;
height: 20.625em;
border-top: 0.3125em solid #fff;
}
.footer-headers {
text-align: center;
padding-top: 1.25em;
padding-bottom: 1.25em;
}
.footer-headers ul li {
list-style: none;
display: inline-block;
padding: 1.25em 5em;
position: relative;
}
.footer-headers ul li a {
text-decoration: none;
color: #ffd700;
font-size: 1.125em;
transition: 0.5s;
}
.footer-headers ul li a::after {
content: "";
width: 0%;
height: 0.1875em;
background: white;
display: block;
margin: auto;
transition: 0.5s;
position: relative;
bottom: 0.1875em;
}
.footer-headers ul li a:hover::after {
width: 100%;
}
.foot-logo img {
width: 25em;
padding-top: 0.0625em;
position: relative;
right: 1.875em;
}
.foot-logo {
text-align: center;
}
.copyright h4 {
color: #ffd700;
position: relative;
top: 0.625em;
}
.copyright {
text-align: center;
position: relative;
top: 2.5em;
}
.copyright h4 a {
text-decoration: none;
color: #ffd700;
transition: 0.5s;
}
.copyright h4 a:hover {
color: red;
}
.socials a i {
color: #ffd700;
transition: 0.5s;
}
.socials a i:hover {
color: red;
}
.socials {
text-align: center;
position: relative;
top: 1.5625em;
}
.socials i {
padding: 0.3125em 2.5em;
}
<html lang="en">
<head>
<script>
ScrollReveal({ reset: true });
</script>
<script src="https://unpkg.com/scrollreveal"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | LuxxMob</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Teko:wght#400;500;700&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/360332bae9.js"
crossorigin="anonymous"
></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Nunito:wght#200;400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<section class="header">
<div class="menu-header">
<nav>
<img src="images/HD_FILE (2).png" />
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<div class="main-texts">
<div class="text-box">
<h1>Welcome To <em>LuxxMob</em></h1>
<p>An upcoming eSports team recruiting talented gamers and quality content creators.</p>
About Us
</div>
</div>
</section>
<!--NEXT SECTION MEET THE OWNER-->
<section class="meet-me">
<h1>Meet The Players</h1>
<div class="player-info">
<p>
Meet the competitive players, content creators and the owner of
LuxxMob. A rapidly growing team of highly skilled members, providing
some of the best content and gameplay available on social media
currently.
</p>
</div>
</section>
<!--FOOTER SECTION-->
<footer>
<div class="footer-headers">
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<div class="foot-logo">
<img src="images/HD_FILE (2).png" />
</div>
<div class="socials">
<i class="fab fa-tiktok"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">
<h4>&copy 2021 LuxxMob</h4>
<h4>Made with &#10084 by #truechow</h4>
</div>
</footer>

As I can see in your code, you have only used one media query, so try to add media queries by considering all sizes of devices. Please find below media queries:
#media screen and (min-width: 320px) and (max-width: 576px) {
}
#media screen and (min-width: 577px) and (max-width: 767px) {
}
#media screen and (min-width: 768px) and (max-width: 991px) {
}
#media screen and (min-width: 992px) and (max-width: 1055px) {
}
#media screen and (min-width: 992px) and (max-width: 1200px) {
}
#media screen and (min-width: 1201px) and (max-width: 1400px) {
}

CSS overflow : hidden may be helpful for you.

in my html css and javascript code the "fas fa-bars" don't open the menu when clicked

when clicking on the bars its meant to open a menu, i am following a youtube video and his works fine however mine isn't working.
hotel website tutorial
// selectors
let header = document.querySelector('.header');
let hamburgerMenu = document.querySelector('.hamburger-menu');
hamburgerMenu.addEventListener('click',function (){
header.classList.toggle('menu-open');
});
/*Import the fonts used*/
#import url('https://fonts.googleapis.com/css?family=Courgette|Open+Sans:400,800&display=swap');
/*Basic reset*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Custom properties*/
:root {
--dark-color: #2d2c2c;
--purple-solid: #350a4f;
--purple-transparent: rgba(53, 10, 79, .7);
--purple-transparent-alt: rgba(53, 10, 79, .5);
--purple-light: #8f50fb;
--yellow-solid: #fa9e2c;
--gradient-color: linear-gradient(to right, var(--yellow-solid), var(--purple-light));
--gradient-color-alt: linear-gradient(to right, var(--purple-light), var(--yellow-solid));
}
/*global style*/
html{
font-size: 10px;
}
body{
font-family: 'Open Sans', sans-serif;
font-size:1.6rem;
color: var(--dark-color);
}
a{
text-decoration: none;
color:inherit;
}
ul{
list-style: none;
}
section{
padding: 5rem 0;
}
/*reusable styles*/
.container{
width:100%;
max-width:120rem;
padding: 0 1.5rem;
margin: 0 auto;
}
/*header styles*/
.header{
width: 100%;
height: 6rem;
display: flex;
align-items: center;
position: fixed;
top: 0;
left:0;
background-color: var(--purple-transparent);
z-index:999;
}
/*header styles - nav*/
.nav{
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img{
max-width: 80%;
}
.hamburger-menu{
font-size: 2.6rem;
color: #fff;
cursor: pointer;
position: relative;
z-index: 1500;
}
.hamburger-menu .fa-times{
display: none;
}
.menu-open .hamburger-menu .fa-times{
display: block;
}
.menu-open .hamburger-menu .fa-bars{
display: none;
}
.nav-list{
position: fixed;
top: 0;
left:0;
width: 100%;
height: 100vh;
background-color: var(--purple-solid);
display:flex;
flex-direction: column;
align-items:center;
z-index:1400;
opacity: 0;
transform: scale(0);
transition: opacity .5s;
}
.menu-open .nav-list{
opacity: 1;
transform: scale(1);
}
.nav-item:not(:last-child){
margin-bottom: .5rem;
}
.nav-link{
display: block;
color: #fff;
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
padding: 1rem;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Travelix</title>
<!--Font awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header"></header>
<div class="container"></div>
<nav class="nav">
<a href="index.html" class="logo">
<img src="./images/logo.png" alt="">
</a>
<div class="hamburger-menu">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Offers
</li>
<li class="nav-item">
News
</li>
<li class="nav-item">
Contact
</li>
</ul>
</nav>
<script src="main.js"></script>
</body>
</html>
I believe the
.menu-open .nav-list{
opacity: 1;
transform: scale(1);
}
part is meant to be triggered when the javascript is run to make the menu visible

You did not move all your menu code inside header as you should.
your header is just opened then closed: <header class="header"></header>
<header class="header">
// move code here
</header>
It should go:
.menu-open .hamburger-menu .fa-bars {
display: none;
}
and you where putting menu-open outside so .menu-open .hamburger-menu .fa-bars never happen.
// selectors
let header = document.querySelector('.header');
let hamburgerMenu = document.querySelector('.hamburger-menu');
hamburgerMenu.addEventListener('click', function() {
console.log(true)
header.classList.toggle('menu-open');
})
/*Import the fonts used*/
#import url('https://fonts.googleapis.com/css?family=Courgette|Open+Sans:400,800&display=swap');
/*Basic reset*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Custom properties*/
:root {
--dark-color: #2d2c2c;
--purple-solid: #350a4f;
--purple-transparent: rgba(53, 10, 79, .7);
--purple-transparent-alt: rgba(53, 10, 79, .5);
--purple-light: #8f50fb;
--yellow-solid: #fa9e2c;
--gradient-color: linear-gradient(to right, var(--yellow-solid), var(--purple-light));
--gradient-color-alt: linear-gradient(to right, var(--purple-light), var(--yellow-solid));
}
/*global style*/
html {
font-size: 10px;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.6rem;
color: var(--dark-color);
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
section {
padding: 5rem 0;
}
/*reusable styles*/
.container {
width: 100%;
max-width: 120rem;
padding: 0 1.5rem;
margin: 0 auto;
}
/*header styles*/
.header {
width: 100%;
height: 6rem;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
background-color: var(--purple-transparent);
z-index: 999;
}
/*header styles - nav*/
.nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
max-width: 80%;
}
.hamburger-menu {
font-size: 2.6rem;
color: #fff;
cursor: pointer;
position: relative;
z-index: 1500;
}
.hamburger-menu .fa-times {
display: none;
}
.menu-open .hamburger-menu .fa-times {
display: block;
}
.menu-open .hamburger-menu .fa-bars {
display: none;
}
.nav-list {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: var(--purple-solid);
display: flex;
flex-direction: column;
align-items: center;
z-index: 1400;
opacity: 0;
transform: scale(0);
transition: opacity .5s;
}
.menu-open .nav-list {
opacity: 1;
transform: scale(1);
}
.nav-item:not(:last-child) {
margin-bottom: .5rem;
}
.nav-link {
display: block;
color: #fff;
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
padding: 1rem;
}
more writing because stuff this I swear this is an easy fix but I'm just dumb
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Travelix</title>
<!--Font awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<div class="container"></div>
<nav class="nav">
<a href="index.html" class="logo">
<img src="./images/logo.png" alt="">
</a>
<div class="hamburger-menu">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Offers
</li>
<li class="nav-item">
News
</li>
<li class="nav-item">
Contact
</li>
</ul>
</nav>
</header>
<script src="main.js"></script>
</body>
</html>
voted to close due to typo.

How can I make the footer stop overlapping with the mobile NAV bar? On the mobile view, the NAV bar goes under the footer. Any solutions?

I have been trying to resolve this for quite some time, but I am able to find the solution.
On the mobile view, the NAV bar goes under the footer. I think there is some kind of mistake in HTML or CSS code. I tried adjusting the values also added many elements on CSS but nothing worked. Please check the codes for me.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
/* For footer but can be used for everything*/
text-decoration: none;
list-style: none;
}
body {
background-color: #ffffff;
}
nav {
font-family: 'Roboto', sans-serif;
align-items: center;
min-height: 9vh;
background-color: #3b9aff;
display: flex;
justify-content: space-around;
}
.nav-links li a:hover{
padding: 14px 22px;
background-color: #ffba30;
transition: 0.3s;
}
.logo{
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-between;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: white;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
padding: 16px 24px;
transition: 0.3s;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #b3bae6;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border: 2px solid red;
}
.dropdown-content a {
display: flex;
color: white;
text-decoration: none;
display: block;
padding: 12px 16px;
}
.footer{
width: 100vw;
display: block;
overflow: hidden;
padding: 70px 0;
box-sizing: border-box;
background-color: #3b9aff;
position: fixed;
bottom: 0;
}
.inner_footer{
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.inner_footer .logo_container{
width: 35%;
float: left;
height: 100;
display: block;
}
.inner_footer .logo_container img{
width: 65px;
height: auto;
}
.inner_footer .footer_third{
width: calc(21.6666666667% - 20px);
margin-right: 10px;
float: left;
height: 100%;
}
.inner_footer .footer_third:last-child{
margin-right: 0;
}
.inner_footer .footer_third h1{
font-family: 'Roboto', sans-serif;
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.inner_footer .footer_third a{
font-family: 'Roboto', sans-serif;
font-size: 18px;
color: white;
display: block;
font-weight: 200;
width: 100%;
padding-bottom: 5px;
}
.inner_footer .footer_third li{
display: inline-block;
padding: 0 5px;
font-size: 20px;
}
.inner_footer .footer_third span{
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-family: 200;
display: block;
width: 100%;
padding-top: 20px;
}
.dropdown:hover .dropdown-content {
display: block;
transition: 0.3s;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:760px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background: #3b9aff;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
/*Mistake*/
nav-links{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
#media(max-width:900px){
.footer .inner_footer{
width: 90%;
}
.inner_footer .logo_container,
.inner_footer .footer_third{
width: 100px;
margin-bottom: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>e-commerce</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://kit.fontawesome.com/dadb58458c.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<div class="logo">
<h4>First Education</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li class="dropdown">
Projects
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="footer">
<div class="inner_footer">
<div class="logo_container">
<img src="logo.jpg">
</div>
<div class="footer_third">
<h1>Need Help?</h1>
Terms &amp Conditions
Privacy Policy
</div>
<div class="footer_third">
<h1>More Intel</h1>
Redeem Voucher
Free Courses
Redeem Voucher
Free Courses
</div>
<div class="footer_third">
<h1>Follow Us</h1>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<span>11 th Floor, 15 St Botolph St, London EC3A 7BB, United Kingdom</span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Add the following property in your css classname
.nav {
position: relative;
z-index: 1000;
...previous properties
}

Your nav has a min-height of 9vh. If the footer winds up being more than 91vh, then it'll overlap.
You're footer is also position:fixed and the text is quite long, which makes it likely to exceed that height. One thing that could work is position:sticky instead of position: fixed if you want the footer to move along with the page.

How to fit unordered list inside of parent span, mine skips to the next line instead of flowing downward

I am writing this code and I want to include 3 buttons under the photo of the recipe as icons, such as a time icon and then the time it takes to make it to the right of the icon. However, the list does not go under the card, it instead moves to a new line.
HTML:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="../stylesheets/recipes.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../javascript/recipes.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="btn">
<a href="../index.html">
<button id="logobtn">
<img src="../images/logo.png" class="logo" alt="Chef logo">
</button>
</a>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Restaurants</li>
<li>Recipes</li>
<li>Requests</li>
</ul>
</nav>
</header>
<h1> Recipes </h1>
<div class="cards">
<a class="card" href="#">
<span class="card-header">
<img src="../images/benedict.jpg" class="cardpic">
<span class="card-title">
<h3>Eggs Benedict</h3>
</span>
</span>
<span class="cardsummary">
<p> Love it <br><br><br></p>
<ul>
<li><i class="fa fa-adn"></i> </li>
<li><i class="fa fa-android"></i> </li>
<li> <i class="fa fa-apple"></i> </li>
</ul>
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/eclair.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
<ul class="list-inline">
<li><i class="fa fa-adn"></i> </li>
<li><i class="fa fa-android"></i> </li>
<li> <i class="fa fa-apple"></i> </li>
</ul>
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/penne.jpg" class="cardpic">
<span class="card-title">
<h3>Penne alla Vodka</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/rissoto.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/rissoto.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/rissoto.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
</div>
</body>
</html>
The card summary with text is displayed properly, under the photo, but anytime I place the list inside of that div it takes on its own property and display elements, instead of wrapping with the parent container.
I am tying to essentially add stylized icons under EACH card as a summary header, and then I will have the text below all 3 of the icons present in every card, but the list of icons just keeps moving onto the next line, and I truly can't figure it out.
CSS:
body {
font-family: oswald;
font-weight: normal;
text-transform: uppercase;
text-align: center;
background-color: #fff4ea;
}
.background {
width: 100%;
height: 100%;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
li a:hover {
color: #E49273;
}
span:hover {
color: #E49273;
}
header {
background: #fff4ea;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
padding-bottom: 30px;
border-bottom: 1px solid black;
z-index: 100;
}
.btn {
-webkit-transition all: 700ms ease;
transition all: 700ms ease;
cursor: pointer;
}
#logobtn {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
float: left;
margin-top: 2px;
margin-left: 8px;
width: 100px;
height: 104px;
}
.logo{
width: 100px;
height: 104px;
}
nav {
float: right;
padding: 20px;
}
nav ul {
list-style: none;
overflow: auto;
position: relative;
}
nav li {
display: inline-block;
float: left;
padding: 10px;
font-size: 30px;
}
.current {
color: #A37A74;
}
h1 {
text-align: center;
position: relative;
top: 100px;
color: #7180AC;
font-size: 5em;
line-height: 1.15em;
}
h2 {
font-size: 2em;
color: black;
line-height: 1.15em;
}
p {
line-height: 1.45em;
margin-bottom: 20px;
}
.skew-forward {
-webkit-transform-origin: 10% 100%;
transform-origin: 10% 100%;
}
.skew-forward:hover {
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
}
#media only screen and (max-width : 685px) {
header {
position: absolute;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
right: 0px;
top: 75px;
width: 50%;
}
nav li {
text-align: right;
width: 100%;
padding: 15px 0px;
margin: 0;
}
nav:hover ul {
display: block;
}
a:hover {
color: yellow;
}
}
#media only screen and (max-width: 790px) {
div.btn {
display: none;
}
}
#media only screen and (max-width: 1000px) {
h1 {
float: none;
display: none;
font-size: 3em;
}
.card {
margin-top: 15%;
}
}
#import "compass";
#import "breakpoint";
/*//Todo clean up some crappy code
*/
.cards {
display: flex;
flex-wrap: wrap;
margin-top: 10%;
box-sizing: border-box;
}
.card {
width: 25%;
position: relative;
margin-bottom: 5%;
margin-right: 2%;
margin-left: 3%;
color: #363636;
}
.cardpic {
position: inherit;
width: 100%;
height: auto;
max-width: 100%; // stop images from breaking out of their bounding boxes.
}
#media (max-width: 700px) {
width: 100%;
}
#include box-shadow(rgba(black, 0.19) 0 0 8px 0);
#include border-radius(4px);
#include breakpoint(700px, $no-query: true) {
/* //switch to 2 columns
*/ max-width: 320px;
margin-right: 20px;
margin-bottom: 20px;
&:nth-child(even) {
margin-right: 0;
}
}
/*#include breakpoint(980px, $no-query: true) {
//switch to 3 columns
&:nth-child(even) {
margin-right: 20px;
}
&:nth-child(3n) {
margin-right: 0;
}
}*/
span {
display: block;
}
.card-summary {
position: relative;
padding-top: 5%;
}
.cardsummary {
position: relative;
padding-top: 5%;
margin-top: 10%;
}
.card-header {
position: inherit;
overflow: hidden;
background-repeat: no-repeat;
background-position: center;
background-blend-mode: overlay;
border-radius(4px 4px 0 0);
max-width: 100%;
margin-top: 0%;
}
.card-title {
background: rgba(255,255,255,0.60);
padding: 3.5% 0 3.5% 0;
color: black;
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
position: absolute;
bottom: 0.5%;
width: 100%;
}
h3 {
font-size: 1.2em;
line-height: 1.2;
padding: 0 3.5%;
margin: 0;
}
.icon-zoom{
position: inherit;
}
ul {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
margin-bottom: 10px;
list-style-type: none;
}
/*---- Genral classes end -------*/
/*Change icons size here*/
.social-icons .fa {
font-size: 1.8em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #FFF;
color: rgba(255, 255, 255, 0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.social-icons.icon-circle .fa{
border-radius: 50%;
}
.social-icons.icon-rounded .fa{
border-radius:5px;
}
.social-icons.icon-flat .fa{
border-radius: 0;
}
.social-icons .fa:hover, .social-icons .fa:active {
color: #FFF;
-webkit-box-shadow: 1px 1px 3px #333;
-moz-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
}
.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
JS:
$(document).ready(function(){
$("#logobtn").hover(function(){
$(this).toggleClass("skew-forward").toggleClass("blur");
});
$("a[href='#']").click(function(e) {
e.preventDefault();
});
})

You have <a> in <a>. If you remove one <a> for example from all <ul> lists:
<li><i class="fa fa-adn"></i></li> the <ul> element will be correctly interpreted by the browser.
To have <ul><li> elements in one line you can use for example "display: flex; justify-content: center" on <ul> or "float: left;" on <ul><li> elements.
To check markup validity you can use also https://validator.w3.org

Creating a "tuck in" effect for nav bar items

I'm trying to create an effect where the nav bar items tuck in after you scroll down. This could be done effectively by increasing the bottom padding or decreasing the top padding. However, when I try to add this into my code, the transition does not show and nothing happens. An example of what I'm trying to create can be seen on this website.
My code so far can be seen in this fiddle.
$(document).ready(function() {
$(window).scroll(function() {
if($(document).scrollTop() > 10) {
$('#nav').addClass('shrink');
$('#menu1').removeClass('shrink');
}
else {
$('#nav').removeClass('shrink');
$('#menu1').removeClass('shrink');
}
});
});
/**********BODY GENERAL**********/
body {
margin: 0;
height: 2500px;
/* just to demonstrate how it will looks with content */
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* Fix this one day */
.bg-img {
height: 100vh;
width: 100%;
background: url('https://github.com/killerchef732/ItsAcademic/blob/master/images/Abkimage.JPG?raw=true');
background-size: cover;
background-position: center;
position: relative;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
#menu1 {
grid-column: 1;
padding-top: 0px;
padding-bottom: 0px;
}
#menu2 {
grid-column: 2;
padding-top: 0px;
padding-bottom: 0px;
}
#logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width: 500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
padding-top: 0px;
padding-bottom: 0px;
}
#menu3 {
grid-column: 4;
padding-top: 0px;
padding-bottom: 0px;
}
#menu4 {
grid-column: 5;
padding-top: 0px;
padding-bottom: 0px;
}
/**************HOVER ANIMATION**************/
div>a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div>a:hover {
color: #000;
}
div>a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div>a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
/**********BODY*****************/
.Minfo {
color: red;
width: 100%;
padding-top: 100px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
}
.subtitle {
padding-left: 4em;
padding-top: 29em;
font-size: 100%;
color: #fff;
}
.title {
font-size: 3em;
text-align: left;
color: #FFF;
padding-bottom: 0px;
}
.subtext {
padding-top: 0px;
color: #FFF;
}
/************* NAV TRASPARENT TO OPAQUE ANIMATION *************/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items: center;
background: transparent;
z-index: 100;
transition: all ease .5s;
height: 70px;
position: relative;
z-index: 99;
}
/*============= NEW CSS RULES ============*/
/* #nav {
position: relative;
z-index: 99;
}
*/
#nav, #words{
height: 0px;
background: transparent;
display: block;
position: fixed;
width: 100%;
z-index: 99999;
transition: all ease .5s;
}
#words: {
font-size: 18px;
transition: all ease .5s;
}
#nav.shrink {
height: 80px;
transition: all ease .5s;
background: white;
}
#menu1.shrink{
padding-top: 0px;
transition: all ease .5s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<!-- Linking Jquery/Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="bg-img">
<header>
<div id="nav">
<!---- NEW BACKGROUND ELEMENT HERE ---->
<div class="background"></div>
<nav class="container">
<div id="menu1">
<a id="navLinks words" href="#home">Home</a>
</div>
<div id="menu2">
<a id="navLinks words" href="#upcoming">Tournaments</a>
</div>
<div id="logo">
<p>It's Academic</p>
</div>
<div id="menu3">
<a id="navLinks words" href="#history">History</a>
</div>
<div id="menu4">
<a id="navLinks words" href="#faq">Contact Info</a>
</div>
</nav>
<!-- This cluster of info -->
</div>
</header>
<div class="Minfo">
<div class="subtitle">
CENTENNIAL<br>
<div class="title">
It's Academic
</div>
<br>
<div class="subtext">
Meets every Tuesday in Room 506
</div>
</div>
</div>
</div>
</body>
</html>
In my approach, the tuck-in should happen simultaneously with the nav bar transition as you can see in the javascript as they are grouped together. I can change that later.

Very nice looking site! Here's what you're looking for...
Just add this to your CSS and you're all set:
.shrink .container{
margin-top: -20px;
}
Of course you should adjust the -20px to whatever suits you!