Good afternoon! I have an odd issue. I'm creating a webpage just to test my newbie skills. I've created a footer that includes some images (social media icons). These images will absolutely NOT show up in the footer whenever I'm on my desktop. Whenever I'm on my laptop, they show up perfectly.
On my desktop, if I move the icons into the <main> of the html, they show. The moment I put them in my <footer> area, they disappear. Has anyone run into this before? Can someone help?
Here's the HTML code...
* {
box-sizing: border-box;
}
body {
background-color: rgb(219, 219, 219);
margin: 0;
}
/*Header CSS code*/
header {
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
width: 125px;
height: 125px;
border: 2px solid black;
border-radius: 50%;
margin-top: 10px;
}
.under-logo {
display: flex;
padding: 10px;
}
.lambo-logo {
width: 145px;
height: 80px;
border-radius: 20px;
padding: 10px;
}
.title {
font-family: 'Merriweather', serif;
}
/*Navigation Bar CSS code*/
nav {
height: 50px;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: rgb(70, 70, 70);
border: 2px solid black;
}
.nav-links {
color: white;
font-size: 25px;
padding: 10px 20px;
}
.nav-links:hover {
background-color: rgb(0, 0, 150);
cursor: pointer;
transition: 0.5s;
border-radius: 50%;
}
/*Signup Form CSS code*/
.signup-title {
text-align: center;
}
form {
margin-left: auto;
margin-right: auto;
width: 500px;
border: 2px solid black;
border-radius: 40px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
margin-top: 10px;
background-color: rgb(0, 0, 150);
color: white;
}
fieldset {
border: 2px solid black;
border-radius: 40px;
width: 400px;
height: 210px;
padding: 20px;
font-size: 25px;
font-weight: bold;
margin-right: auto;
margin-left: auto;
background-color: rgb(219, 219, 219);
color: black;
}
input[type="text"],
[type="email"] {
width: 100%;
font-size: 15px;
height: 30px;
padding-left: 5px;
}
button[type="submit"] {
width: 100%;
height: 40px;
margin-top: 10px;
font-size: 20px;
font-weight: bold;
border: 2px solid black;
border-radius: 40px;
background-color: rgb(0, 0, 150);
color: white;
}
button[type="submit"]:hover {
cursor: url(Images/pagani-cursor.png) 55 55, auto;
background-color: green;
color: white;
transition: .5s;
}
/*Car CSS code - Main content of page*/
.cars {
display: flex;
flex-direction: column;
}
.car-name {
margin-top: 0px;
}
.car-stats {
margin-top: 0px;
margin-bottom: 5px;
}
.car-display {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding: 20px;
border: 2px solid black;
border-radius: 40px;
margin-top: 20px;
margin-bottom: 20px;
}
.car {
width: 300px;
border-radius: 40px;
border: 2px solid black;
}
/*Footer CSS code*/
footer {
background-color: rgb(70, 70, 70);
height: 75px;
width: 100%;
position: absolute;
border: 2px solid black;
display: flex;
justify-content: center;
}
.footer-text {
color: white;
margin-top: 0;
font-family: 'Merriweather', serif;
}
.social-icons {
display: flex;
}
/*Code for larger screens*/
@media screen and (min-width: 800px) {
.cars {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
padding: 20px;
}
}<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Venny's Cars</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<!--Below is the logo and title for the website-->
<header class="header">
<img src="Images\VennyDolphin.jpg" alt="Venny with dolphin" class="logo">
<div class="under-logo">
<img src="Images/lambo-logo-reverse.png" alt="outline of car" class="lambo-logo">
<h1 class="title">Venny's Cars</h1>
<img src="Images/lambo-logo.png" alt="reverse outline" class="lambo-logo">
</div>
</header>
<!--Below is the Navigation Bar-->
<nav class="navbar">
<div class="nav-links"><a href: "#">Link</a></div>
<div class="nav-links"><a href: "#">2nd Link</a></div>
<div class="nav-links"><a href: "#">3rd Link</a></div>
</nav>
<!--Here is the signup form-->
<main>
<form class="signup-form" action="newsletter.html" method="POST">
<h1 class="signup-title">Sign Up for our Newsletter!</h1>
<fieldset class="name-email-input">
<div>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" placeholder="John" required>
</div>
<div>
<label>Email:</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required>
</div>
<!--Signup Button-->
<div class="button">
<button type="submit" id="button">Sign Up!</button>
</div>
</fieldset>
</form>
<!--Below is our section for the cars-->
<div class="cars">
<!--Porsche 911 GT2 RS-->
<div class="car-display">
<h1 class="car-name">Porsche 911 GT2 RS</h1>
<img src="Images\gt2rs.jpg" class="car gt2rs" alt="Porshe 911 GT2 RS">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 3.8-liter Twin-Turbo Flat 6</li>
<li>HP: 690hp @ 7000rpm</li>
<li>Torque: 553 lb-ft @ 2500rpm</li>
<li>Price: $293,200</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PwAhAFyMwk8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Koenigsegg One:1-->
<div class="car-display">
<h1 class="car-name">Koenigsegg One:1</h1>
<img src="Images\k1.jpg" class="car k1" alt="Koenigsegg One:1">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 5.0-liter Twin-Turbo V8</li>
<li>HP: 1341hp @ 7500rpm</li>
<li>Torque: 1010 lb-ft @ 6000rpm</li>
<li>Price: $2,850,000</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7X1z-1xwquk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Porsche 918 Spyder-->
<div class="car-display">
<h1 class="car-name">Porsche 918 Spyder</h1>
<img src="Images\918.jpg" class="car 918" alt="Porshe 918 Spyder">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 4.6-liter V8 Hybrid</li>
<li>HP: 887hp @ 8600rpm</li>
<li>Torque: 944 lb-ft @ 5000rpm</li>
<li>Price: $845,000</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/nSqzp3kdAm4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</main>
<!--Below is the footer-->
<footer>
<h2 class="footer-text">Follow me for new additions!</h2>
<div class="social-icons">
<a href="#" target="_blank"><img src="Images/facebook.png" alt="facebook"></a>
<a href="#" target="_blank"><img src="Images/insta.png" alt="insta"></a>
</div>
</footer>
<script src="script.js"></script>
<!--Link to Javascript-->
<script src="action.js"></script>
</body>
</html>Having tested your code, this is a path issue, but you do have a couple of other errors in your code that need addressing. Your links at the top were posted as <a href:"#" >Link 1</a> etc. ; with a colon instead of an equals sign. Replace ":" with "=" in your links, even if thelinks are blank. Also, in numerous places you have backwards slashes where the slashes should be pointing forwards, as already pointed out. (only some had been corrected). For the purpose of the snippet, I commented out the links to the stylesheet in the head, as the css was in listed separately.
Regarding the path, I entered a path to a facebook icon on a website using the full domain name, and the icon showed. It was rather large, so I added a class for your social icon images to reduce the size. Adjust or remove this as you see fit, depending on the size of your icons. The main issue as I see it regarding the icons not appearing is that you need to correct the file path in your code.
Hope this helps
* {
box-sizing: border-box;
}
body {
background-color: rgb(219, 219, 219);
margin: 0;
}
/*Header CSS code*/
header {
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
width: 125px;
height: 125px;
border: 2px solid black;
border-radius: 50%;
margin-top: 10px;
}
.under-logo {
display: flex;
padding: 10px;
}
.lambo-logo {
width: 145px;
height: 80px;
border-radius: 20px;
padding: 10px;
}
.title {
font-family: 'Merriweather', serif;
}
/*Navigation Bar CSS code*/
nav {
height: 50px;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: rgb(70, 70, 70);
border: 2px solid black;
}
.nav-links {
color: white;
font-size: 25px;
padding: 10px 20px;
}
.nav-links:hover {
background-color: rgb(0, 0, 150);
cursor: pointer;
transition: 0.5s;
border-radius: 50%;
}
/*Signup Form CSS code*/
.signup-title {
text-align: center;
}
form {
margin-left: auto;
margin-right: auto;
width: 500px;
border: 2px solid black;
border-radius: 40px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
margin-top: 10px;
background-color: rgb(0, 0, 150);
color: white;
}
fieldset {
border: 2px solid black;
border-radius: 40px;
width: 400px;
height: 210px;
padding: 20px;
font-size: 25px;
font-weight: bold;
margin-right: auto;
margin-left: auto;
background-color: rgb(219, 219, 219);
color: black;
}
input[type="text"],
[type="email"] {
width: 100%;
font-size: 15px;
height: 30px;
padding-left: 5px;
}
button[type="submit"] {
width: 100%;
height: 40px;
margin-top: 10px;
font-size: 20px;
font-weight: bold;
border: 2px solid black;
border-radius: 40px;
background-color: rgb(0, 0, 150);
color: white;
}
button[type="submit"]:hover {
cursor: url(Images/pagani-cursor.png) 55 55, auto;
background-color: green;
color: white;
transition: .5s;
}
/*Car CSS code - Main content of page*/
.cars {
display: flex;
flex-direction: column;
}
.car-name {
margin-top: 0px;
}
.car-stats {
margin-top: 0px;
margin-bottom: 5px;
}
.car-display {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding: 20px;
border: 2px solid black;
border-radius: 40px;
margin-top: 20px;
margin-bottom: 20px;
}
.car {
width: 300px;
border-radius: 40px;
border: 2px solid black;
}
/*Footer CSS code*/
footer {
background-color: rgb(70, 70, 70);
height: 75px;
width: 100%;
position: absolute;
border: 2px solid black;
display: flex;
justify-content: center;
}
.footer-text {
color: white;
margin-top: 0;
font-family: 'Merriweather', serif;
}
.social-icons {
display: flex;
}
.social-icons a img {
max-width: 26px;
height: auto;
margin: 2px 5px;
}
/*Code for larger screens*/
@media screen and (min-width: 800px) {
.cars {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
padding: 20px;
}
}<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Venny's Cars</title>
<!-- <link href="main.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap" rel="stylesheet">-->
</head>
<body>
<!--Below is the logo and title for the website-->
<header class="header">
<img src="Images/VennyDolphin.jpg" alt="Venny with dolphin" class="logo">
<div class="under-logo">
<img src="Images/lambo-logo-reverse.png" alt="outline of car" class="lambo-logo">
<h1 class="title">Venny's Cars</h1>
<img src="Images/lambo-logo.png" alt="reverse outline" class="lambo-logo">
</div>
</header>
<!--Below is the Navigation Bar-->
<nav class="navbar">
<div class="nav-links"><a href="#">Link</a></div>
<div class="nav-links"><a href="#">2nd Link</a></div>
<div class="nav-links"><a href="#">3rd Link</a></div>
</nav>
<!--Here is the signup form-->
<main>
<form class="signup-form" action="newsletter.html" method="POST">
<h1 class="signup-title">Sign Up for our Newsletter!</h1>
<fieldset class="name-email-input">
<div>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" placeholder="John" required>
</div>
<div>
<label>Email:</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required>
</div>
<!--Signup Button-->
<div class="button">
<button type="submit" id="button">Sign Up!</button>
</div>
</fieldset>
</form>
<!--Below is our section for the cars-->
<div class="cars">
<!--Porsche 911 GT2 RS-->
<div class="car-display">
<h1 class="car-name">Porsche 911 GT2 RS</h1>
<img src="Images\gt2rs.jpg" class="car gt2rs" alt="Porshe 911 GT2 RS">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 3.8-liter Twin-Turbo Flat 6</li>
<li>HP: 690hp @ 7000rpm</li>
<li>Torque: 553 lb-ft @ 2500rpm</li>
<li>Price: $293,200</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PwAhAFyMwk8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Koenigsegg One:1-->
<div class="car-display">
<h1 class="car-name">Koenigsegg One:1</h1>
<img src="Images/k1.jpg" class="car k1" alt="Koenigsegg One:1">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 5.0-liter Twin-Turbo V8</li>
<li>HP: 1341hp @ 7500rpm</li>
<li>Torque: 1010 lb-ft @ 6000rpm</li>
<li>Price: $2,850,000</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7X1z-1xwquk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Porsche 918 Spyder-->
<div class="car-display">
<h1 class="car-name">Porsche 918 Spyder</h1>
<img src="Images/918.jpg" class="car 918" alt="Porshe 918 Spyder">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 4.6-liter V8 Hybrid</li>
<li>HP: 887hp @ 8600rpm</li>
<li>Torque: 944 lb-ft @ 5000rpm</li>
<li>Price: $845,000</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/nSqzp3kdAm4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</main>
<!--Below is the footer-->
<footer>
<h2 class="footer-text">Follow me for new additions!</h2>
<div class="social-icons">
<a href="#" target="_blank"><img src="http://www.msskincarebeautysalon.com/images/facebook-button-blue.png" alt="facebook"></a>
<a href="#" target="_blank"><img src="Images/insta.png" alt="insta"></a>
</div>
</footer>
<script src="script.js"></script>
<!--Link to Javascript-->
<script src="action.js"></script>
</body>
</html>