So on this one challenge I keep getting the error: "The height of the welcome section should be equal to the height of the viewport." I have 100vh on it but im not sure how to fix it.
html:
<header>
<nav id="navbar">
<a href="#welcome-section" id="logo-link">
<h1>Welcome</h1>
</a>
<ul class="nav-list">
<a href="#projects">
<li>Projects</li>
</a>
<a href="#profile">
<li>Profile</li>
</a>
<a href="#contact">
<li>Contact</li>
</a>
</ul>
</nav>
</header>
<!--BODY-->
<body>
<section id="welcome-section">
<div class="header-text">
<h1><code>Hello World!</code></h1>
<p>My name is Nick</p>
</div>
</section>
css:
#navbar {
position: fixed;
top: 0;
height: 80px;
width: 100%;
background-color: #007cc7;
display: flex;
justify-content: space-between;
z-index: 5;
}
.nav-list {
display: flex;
margin-right: 20px;
margin-top: auto;
margin-bottom: auto;
}
.nav-list a {
display: block;
font-size: 1.5rem;
padding: 10px;
color: white;
}
.nav-list a:hover {
color: cyan;
}
#logo-link {
color: white;
margin-top: auto;
margin-bottom: auto;
margin-left: 10px;
font-size: 1.5rem;
}
#welcome-section {
height: 100vh;
margin-top: 20px;
text-align: center;
background-color: #12232e;
border-style: solid;
border-color: #203647;
border-width: 10px;
border-top: 0;
border-right: 0;
border-left: 0;
display: flex;
}
.header-text {
margin: auto;
}
#welcome-section h1 {
font-size: 5rem;
}
#welcome-section p {
font-size: 1.5rem;
}
Link to the challenge: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage
Working Demo: https://dojo.telerik.com/EkoCUneS/2
You need to add
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
Remove margin-top from #welcome-section.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
#navbar {
position: fixed;
top: 0;
height: 80px;
width: 100%;
background-color: #007cc7;
display: flex;
justify-content: space-between;
z-index: 5;
}
.nav-list {
display: flex;
margin-right: 20px;
margin-top: auto;
margin-bottom: auto;
}
.nav-list a {
display: block;
font-size: 1.5rem;
padding: 10px;
color: white;
}
.nav-list a:hover {
color: cyan;
}
#logo-link {
color: white;
margin-top: auto;
margin-bottom: auto;
margin-left: 10px;
font-size: 1.5rem;
}
#welcome-section {
height: 100vh;
text-align: center;
background-color: #12232e;
border-style: solid;
border-color: #203647;
border-width: 10px;
border-top: 0;
border-right: 0;
border-left: 0;
display: flex;
}
.header-text {
margin: auto;
}
#welcome-section h1 {
font-size: 5rem;
}
#welcome-section p {
font-size: 1.5rem;
}
<header>
<nav id="navbar">
<a href="#welcome-section" id="logo-link">
<h1>Welcome</h1>
</a>
<ul class="nav-list">
<a href="#projects">
<li>Projects</li>
</a>
<a href="#profile">
<li>Profile</li>
</a>
<a href="#contact">
<li>Contact</li>
</a>
</ul>
</nav>
</header>
<!--BODY-->
<body>
<section id="welcome-section">
<div class="header-text">
<h1><code>Hello World!</code></h1>
<p>My name is Nick</p>
</div>
</section>
</body>
Related
I have been trying to get rid of the horizontal scrollbar in my code. I am creating a personal portfolio page. I have looked at all my widths and I don't think that's the issue. It might be my media queries. I am new to coding and I am sorry if this isn't a good question. I have tried researching and found vmin vh vw vmax and such but when applied to all the widths, it doesn't appear to affect the scroll bar.
#import url('https://fonts.googleapis.com/css2?family=PT+Sans&family=Roboto:wght#400;500&family=Ubuntu&display=swap');
html {
scroll-behavior: smooth;
box-sizing: border-box;
font-size: 62.5%;
background-image: linear-gradient(180deg, #001219, #005F73, #0A9396, #0B9669);
}
body {
font-size: 1.8rem;
font-family: Roboto, PT Sans, Ubuntu;
text-size-adjust: 80%;
}
#navbar {
background: linear-gradient(180deg, #001219, rgba(0, 0, 0, 0));
position: fixed;
width: 100%;
left: 0;
top: 0;
margin: 0;
padding: 0;
}
.navbar-links {
text-decoration: none!important;
color: #F2E9E4;
}
ul {
list-style: none!important;
}
nav>ul {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.invisible-para {
opacity: 0%;
}
#welcome-section {
color: #CA6702;
text-shadow: 2px, 2px;
text-align: center;
height: 100vh;
width: 100%;
font-size: 5vmin;
position: relative;
bottom: 13.5em;
}
.welcome-header {
margin-bottom: 0;
text-shadow: 2px 2px 20px black;
}
.welcome-para {
text-shadow: 2px 2px 20px black;
}
.project-image {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 10px;
}
.projects-header {
padding-top: 3rem!important;
padding-bottom: 2rem;
display: flex;
text-align: center;
justify-content: center;
font-size: 3.5rem;
text-shadow: 2px 2px 20px black;
color: #CA6702;
}
#projects {
display: flex;
flex-direction: column;
text-align: center;
width: 100%;
}
.project-tile {
text-decoration: none;
color: #001219;
text-align: center;
text-shadow: 2px 2px 20px;
font-size: 1.5em;
font-family: PT Sans;
font-weight: bold;
display: flex;
flex-direction: column;
background-color: #94D2BD;
border-radius: 10px;
width: 300px;
padding: 1rem;
margin: 8vh 10vw 0 10vw;
box-shadow: 2px 2px 20px;
}
.grid-container {
width: 100%;
display: grid!important;
grid-template-columns: 1fr 1fr;
grid-gap: 2rem;
align-self: center;
text-align: center;
}
#contact {
text-align: center;
padding: 3em;
height: auto;
text-shadow: 2px 2px 20px;
}
#contact-header {
font-size: 8vmin;
padding: 0 0 2em 0;
}
div>ul {
display: flex;
flex-direction: row;
justify-content: space-around;
}
#profile-link {
text-decoration: none;
color: black;
font-family: Ubuntu;
font-weight: bold;
font-size: 4vmin;
background-color: #94D2BD;
border-radius: 5px;
padding: 8px;
box-shadow: 2px 2px 20px;
}
/*MEDIA QUIERIES BELOW*/
#media (max-width: 800px) {
.grid-container {
grid-template-columns: 1fr;
}
}
#media (max-width:400px) {
#welcome-section {
bottom: 25em;
}
}
/*MEDIA QUEIRIES ABOVE*/
<p class="invisible-para" id="welcome-section"></p>
<nav id="navbar">
<ul>
<li><a class="navbar-links" href="#welcome-section">Welcome</a></li>
<li><a class="navbar-links" href="#projects">Projects</a></li>
<li><a class="navbar-links" href="#contact">Contact</a></li>
</ul>
</nav>
<section id="welcome-section">
<h1 class="welcome-header">Hi, I'm Timothy McMasters</h1>
<p class="welcome-para">an aspiring full-stack developer</p>
</section>
<section id="projects">
<h2 class="projects-header">The following are projects that I have created</h2>
<ul class="grid-container">
<li class="grid-box">
<a class="project-tile" href="https://codepen.io/tmmcmasters/full/QWOEXyO" target="_blank"><img src="https://i.ibb.co/3B42dcS/Form-Survey.png" class="project-image" alt="Form-Survey">Form Survey</img>
</a>
</li>
<li class="grid-box">
<a class="project-tile" href="https://codepen.io/tmmcmasters/full/zYPNdoX" target="_blank"><img src="https://i.ibb.co/wKLyykK/Product-Landing-Page.png" alt="Product-Landing-Page" class="project-image">Product Landing Page</img>
</a>
</li>
<li class="grid-box">
<a class="project-tile" href="https://codepen.io/tmmcmasters/full/MWOmaGJ" target="_blank" class="project-tile"><img src="https://i.ibb.co/0mdYX9X/Techncacal-Documentation-Page.png" alt="Technical-Documentation-Page" class="project-image">Technical Documentation Page</img>
</a>
</li>
<li class="grid-box">
<a href="https://codepen.io/tmmcmasters/full/MWOebeo" target="_blank" class="project-tile"><img src="https://i.ibb.co/tcJcWsw/Tribute-Page.png" alt="Tribute-Page" class="project-image">Tribute Page</img>
</a>
</li>
</ul>
</section>
<section id="contact">
<h2 id="contact-header">Contact Me</h2>
<div class="contact-links">
<ul>
<li><a id="profile-link" href="https://github.com/Tmmcmasters" target="_blank">Github</a></li>
<li><a id="profile-link" href="mailto:tmmcmasters#gmail.com?subject=" feedback " target="_blank ""> Email me </a></li>
<li><a id="profile-link" href="tel:12602672147" target="_blank">Call me</a></li>
</ul>
</div>
</section>
Add a padding: 0; to your grid-container to remove the padding which makes the page scroll:
This is the code:
#import url('https://fonts.googleapis.com/css2?family=PT+Sans&family=Roboto:wght#400;500&family=Ubuntu&display=swap');
html {
scroll-behavior: smooth;
box-sizing: border-box;
font-size: 62.5%;
background-image: linear-gradient(180deg, #001219, #005F73, #0A9396, #0B9669);
}
body {
font-size: 1.8rem;
font-family: Roboto, PT Sans, Ubuntu;
text-size-adjust: 80%;
}
#navbar {
background: linear-gradient(180deg, #001219, rgba(0, 0, 0, 0));
position: fixed;
width: 100%;
left: 0;
top: 0;
margin: 0;
padding: 0;
}
.navbar-links {
text-decoration: none!important;
color: #F2E9E4;
}
ul {
list-style: none!important;
}
nav>ul {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.invisible-para {
opacity: 0%;
}
#welcome-section {
color: #CA6702;
text-shadow: 2px, 2px;
text-align: center;
height: 100vh;
width: 100%;
font-size: 5vmin;
position: relative;
bottom: 13.5em;
}
.welcome-header {
margin-bottom: 0;
text-shadow: 2px 2px 20px black;
}
.welcome-para {
text-shadow: 2px 2px 20px black;
}
.project-image {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 10px;
}
.projects-header {
padding-top: 3rem!important;
padding-bottom: 2rem;
display: flex;
text-align: center;
justify-content: center;
font-size: 3.5rem;
text-shadow: 2px 2px 20px black;
color: #CA6702;
}
#projects {
display: flex;
flex-direction: column;
text-align: center;
width: 100%;
}
.project-tile {
text-decoration: none;
color: #001219;
text-align: center;
text-shadow: 2px 2px 20px;
font-size: 1.5em;
font-family: PT Sans;
font-weight: bold;
display: flex;
flex-direction: column;
background-color: #94D2BD;
border-radius: 10px;
width: 300px;
padding: 1rem;
margin: 8vh 10vw 0 10vw;
box-shadow: 2px 2px 20px;
}
.grid-container {
width: 100%;
display: grid!important;
grid-template-columns: 1fr 1fr;
grid-gap: 2rem;
align-self: center;
text-align: center;
padding: 0; /* added this one */
}
#contact {
text-align: center;
padding: 3em;
height: auto;
text-shadow: 2px 2px 20px;
}
#contact-header {
font-size: 8vmin;
padding: 0 0 2em 0;
}
div>ul {
display: flex;
flex-direction: row;
justify-content: space-around;
}
#profile-link {
text-decoration: none;
color: black;
font-family: Ubuntu;
font-weight: bold;
font-size: 4vmin;
background-color: #94D2BD;
border-radius: 5px;
padding: 8px;
box-shadow: 2px 2px 20px;
}
/*MEDIA QUIERIES BELOW*/
#media (max-width: 800px) {
.grid-container {
grid-template-columns: 1fr;
}
}
#media (max-width:400px) {
#welcome-section {
bottom: 25em;
}
}
/*MEDIA QUEIRIES ABOVE*/
<p class="invisible-para" id="welcome-section"></p>
<nav id="navbar">
<ul>
<li><a class="navbar-links" href="#welcome-section">Welcome</a></li>
<li><a class="navbar-links" href="#projects">Projects</a></li>
<li><a class="navbar-links" href="#contact">Contact</a></li>
</ul>
</nav>
<section id="welcome-section">
<h1 class="welcome-header">Hi, I'm Timothy McMasters</h1>
<p class="welcome-para">an aspiring full-stack developer</p>
</section>
<section id="projects">
<h2 class="projects-header">The following are projects that I have created</h2>
<ul class="grid-container">
<li class="grid-box">
<a class="project-tile" href="https://codepen.io/tmmcmasters/full/QWOEXyO" target="_blank"><img src="https://i.ibb.co/3B42dcS/Form-Survey.png" class="project-image" alt="Form-Survey">Form Survey</img>
</a>
</li>
<li class="grid-box">
<a class="project-tile" href="https://codepen.io/tmmcmasters/full/zYPNdoX" target="_blank"><img src="https://i.ibb.co/wKLyykK/Product-Landing-Page.png" alt="Product-Landing-Page" class="project-image">Product Landing Page</img>
</a>
</li>
<li class="grid-box">
<a class="project-tile" href="https://codepen.io/tmmcmasters/full/MWOmaGJ" target="_blank" class="project-tile"><img src="https://i.ibb.co/0mdYX9X/Techncacal-Documentation-Page.png" alt="Technical-Documentation-Page" class="project-image">Technical Documentation Page</img>
</a>
</li>
<li class="grid-box">
<a href="https://codepen.io/tmmcmasters/full/MWOebeo" target="_blank" class="project-tile"><img src="https://i.ibb.co/tcJcWsw/Tribute-Page.png" alt="Tribute-Page" class="project-image">Tribute Page</img>
</a>
</li>
</ul>
</section>
<section id="contact">
<h2 id="contact-header">Contact Me</h2>
<div class="contact-links">
<ul>
<li><a id="profile-link" href="https://github.com/Tmmcmasters" target="_blank">Github</a></li>
<li><a id="profile-link" href="mailto:tmmcmasters#gmail.com?subject=" feedback " target="_blank ""> Email me </a></li>
<li><a id="profile-link" href="tel:12602672147" target="_blank">Call me</a></li>
</ul>
</div>
</section>
I am trying to build my personal webpage but simply cant manage to make my footer not cover the two buttons.
This problem only occurs on my laptop. As soon as I switch to my external monitor, the two buttons arent covered anymore.
I have tried inserting html{overflow-y: scroll;} to my css but it doesnt seem to work :(
Any help would be awesome! Thank you.
HTML:
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
background-size: cover;
padding: 0;
margin: 0;
}
.navbar {
height: 80px;
width: 100%;
background-color: #808080;
}
.logo {
width: 140px;
height: auto;
padding: 15px 50px;
}
.navbar ul {
float: right;
margin-right: 20px;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
font-family: 'Roboto', sans-serif;
transition: .2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
user-select: none;
}
.center h1 {
color: black;
font-size: 70px;
font-weight: bold;
width: 900px;
text-align: center;
}
.center h2 {
color: black;
font-size: 70px;
font-weight: bold;
width: 885px;
margin-top: 10px;
text-align: center;
}
.center .buttons {
margin: 35px 280px;
}
.buttons button {
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons .btn {
margin-left: 25px;
}
.buttons button:hover {
background: #4b79b4;
}
footer {
position: absolute;
background-color: #808080;
height: auto;
width: 100%;
padding-top: 40px;
color: black;
bottom: 0px;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3 {
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p {
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li {
margin: 0 10px;
}
.socials a {
text-decoration: none;
color: lightsteelblue;
}
.socials a i {
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i {
color: #4b79b4;
}
.footer-bottom {
background-color: #737373;
width: 100%;
padding: 20px 0;
text-align: center;
}
.footer-bottom p {
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span {
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<!-- BEGIN NAVBAR -->
<nav class="navbar">
<img class="logo" src="logo.png">
<ul>
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<!-- END NAVBAR -->
<!-- BEGIN CONTENT -->
<div class="center">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
<!-- END CONTENT -->
</div>
<!-- BEGIN FOOTER -->
<footer>
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
<!-- END FOOTER -->
</body>
</html>
What you describe kind of feels like a grid to me using three "rows", one for the "navbar", one for the "content" and one for the "footer" such as:
display: grid;
grid-template-rows: auto 1fr auto;
Now given that we can put the containers for the rows in a wrapper .wrapper
Then we tall it which "row" each of the sections belongs in. grid-row: 2/2; for the content for example in row 2 (start and end)
I took a good bit of liberty with your CSS (it is still a "lot" just for this) specifically, I added borders to show where things are - you will want to remove those but I did it to illustrate where is "is" in the flow.
This is by no means "perfect" but just a very quick place to build from.
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
padding: 0;
margin: 0;
border: solid orange 3px;
}
.wrapper {
display: grid;
grid-template-rows: auto 1fr auto;
border: lime 4px dashed;
}
.navbar-container {
border: red 4px solid;
grid-row: 1/1;
display: flex;
align-items: start;
margin: 0rem;
}
.content-container {
font-family: sans-serif;
display: grid;
place-items: center;
grid-row: 2/2;
border: blue 1px solid;
}
.footer-container {
padding-top: 2rem;
display: grid;
grid-template-rows: auto 1fr auto;
border: cyan 1px solid;
}
.footer-content {
display: grid;
grid-template-rows: 1fr auto 1fr;
align-items: center;
justify-items: center;
}
.footer-bottom {
grid-row: 3/3;
align-text: center;
padding: 0.25rem;
border: dashed blue 1px;
}
.navbar {
height: 5rem;
width: 100%;
background-color: #808080;
font-family: 'Roboto', sans-serif;
}
.navbar>.logo {
width: 140px;
height: auto;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 50px;
padding-right: 50px;
border: solid 1px green;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
transition: 0.2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
user-select: none;
}
.buttons {
display: flex;
flex-direction: row;
margin-top: 1rem;
margin-bottom: 1rem;
}
.buttons button {
margin: 1rem;
}
.buttons button {
flex: auto;
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons button:hover {
background: #4b79b4;
}
.socials {
list-style: none;
display: flex;
align-items: middle;
justify-content: center;
}
.socials li {
margin-right: 10px;
}
.footer-bottom {
font-size: 0.75rem;
background-color: #737373;
text-align: center;
width: 100%;
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar navbar-container">
<img class="logo" src="logo.png">
<ul class="menu-items">
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<div class="center content-container">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
</div>
<footer class="footer-container">
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
</body>
</html>
I'm kinda confused and tried out everything I'm able to try. Searching stack overflow I couldn't find the similar problem. So a little background, I'm trying to make a navigation menu with flexbox like in the picture down below, but I can't display link's border-bottom out of its parent div. Is it even possible?
This is what I want
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
max-width: 1170px;
padding: 0 15px;
margin: 0 auto;
}
.header {
background: #44433e;
}
.header__menu {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.header__logo {
padding: 10px 0;
}
.menu__list {
display: flex;
list-style: none;
align-items: center;
}
.menu__item {
margin-left: 15px;
}
.menu__item:first-child {
margin-left: 0;
border-bottom: 3px solid #18cfab;
}
.menu__link {
display: inline-block;
font-family: "Montserrat-bold";
color: #b8b8b8;
font-size: 13px;
line-height: 42px;
text-decoration: none;
text-transform: uppercase;
}
.menu__link-active {
color: #18cfab;
}
<header class="header">
<div class="header__wrap wrap">
<nav class="header__menu menu">
<div class="header__logo">
Logo
</div>
<ul class="menu__list">
<li class="menu__item">home</li>
<li class="menu__item">about</li>
<li class="menu__item">skills</li>
<li class="menu__item">service</li>
<li class="menu__item">work</li>
</nav>
</div>
</header>
You can achieve this using an :after element with a position: absolute:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
max-width: 1170px;
padding: 0 15px;
margin: 0 auto;
}
.header {
background: #44433e;
}
.header__menu {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.header__logo {
padding: 10px 0;
}
.menu__list {
display: flex;
list-style: none;
align-items: center;
}
.menu__item {
margin-left: 15px;
position: relative;
}
.menu__item:first-child {
margin-left: 0;
}
.menu__item:first-child:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background-color: #18cfab;
}
.menu__link {
display: inline-block;
font-family: "Montserrat-bold";
color: #b8b8b8;
font-size: 13px;
line-height: 42px;
text-decoration: none;
text-transform: uppercase;
}
.menu__link-active {
color: #18cfab;
}
<header class="header">
<div class="header__wrap wrap">
<nav class="header__menu menu">
<div class="header__logo">
Logo
</div>
<ul class="menu__list">
<li class="menu__item">home</li>
<li class="menu__item">about</li>
<li class="menu__item">skills</li>
<li class="menu__item">service</li>
<li class="menu__item">work</li>
</nav>
</div>
</header>
I'm creating footer for my website. I encounter problems that seem to be banal, maybe not. Inside the 'footer' element is a list of 'ul', inside them 'li' with links to social media. The Chrome browser does not display these elements, similarly to Opera and Mozilla. Where is the problem? I am running out of ideas.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Lato', 'Josefin Sans', sans-serif;
font-size: 0;
}
.navbar {
font-size: 18px;
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
}
.nav-links,
.logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
vertical-align: middle;
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.main-nav {
list-style-type: none;
display: none;
}
.active {
display: block;
}
.background-image img {
height: 100%;
width: 100%;
}
.container {
display: flex;
height: 250px;
}
.column-left {
width: 33.333%;
background: #f2f2f2;
border: 1px solid #e6e6e6;
}
.column-center {
width: 33.333%;
background: #f2f2f2;
border: 1px solid #e6e6e6;
}
.column-right {
width: 33.333%;
background: #f2f2f2;
border: 1px solid #e6e6e6;
}
.container .column-left {
text-align: center;
padding-top: 20px;
font-size: 20px;
}
h2 {
font-size: 23px;
padding: 15px;
}
p {
font-size: 20px;
padding: 15px;
}
.container .column-center {
text-align: center;
padding-top: 20px;
font-size: 20px;
}
.container .column-right {
text-align: center;
padding-top: 20px;
font-size: 20px;
}
#media screen and (min-width: 600px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin: 0;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.logo:hover,
.nav-links:hover {
color: rgba(255, 255, 255, 1);
}
}
#media screen and (max-width: 599px) {
h2.title {
font-size: 15px;
}
p {
font-size: 13px;
}
}
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/8a84b6b9df.js"></script>
<div>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<img src="img/developer.png" alt="Sebastian Falba" width="50">
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
About me
</li>
<li>
Projects
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<div class="background-image">
<img src="img/responsive.jpg" alt="web development">
</div>
<div class="container">
<div class="column-left"><i class="fas fa-keyboard fa-3x"></i>
<h2 class="title">Modern design</h2>
<p class="description">Fantastic Clean Website Designs</p>
</div>
<div class="column-center"><i class="far fa-window-maximize fa-3x"></i>
<h2 class="title">Responsive</h2>
<p class="description">Make your website mobile-friendly</p>
</div>
<div class="column-right"><i class="fas fa-laptop-code fa-3x"></i>
<h2 class="title">Quality code</h2>
<p class="description">Coding best practices are a set of my rules</p>
</div>
</div>
<footer>
<ul>
<li>Footer</li>
</ul>
</footer>
You set the font-size to 0 so the text has no height.
Since the text has no height, the <a> has no height, so the <li> has no height, so the <ul> has no height, to the <footer> has no height, so you can't see it.
I would like to make the image in the center of the navigation bar slide down when the width of the page decreases.
This is how it looks like on a desktop:
Whereas on a smartphone the navigation bar should look like this:
As you can see, I would like the nav bar to remain as it is, except for the image to slide down the first row.
body {
background-color: gray;
color: white;
font-family: Helvetica Neue;
}
/* Header */
header {
background-color: black;
background-image: url("images/spiaggia.jpg");
background-size: 100%;
background-position: center;
padding: 2px;
color: white;
height: 200px;
background-repeat: no-repeat
}
section {
background-color: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
div {
background-color: black;
display: inline-block;
width: 100px;
margin: auto;
color: white;
}
header ul {
margin: 0px;
padding: 0px;
}
header li {
text-decoration: none;
display: inline-block;
margin-right: 20px;
}
header .mobile {
display: none;
}
a {
color: white;
text-decoration: none;
}
.logo {
background-image: url("images/città.jpg");
background-size: 100px;
background-repeat: no-repeat;
display: inline-block;
height: 50px;
position: relative;
text-indent: -999999px;
top: 0px;
width: 100px;
border: solid lightblue;
}
/* Features */
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 10%;
box-shadow: gray 0 0 10px;
width: 200px;
}
/* Footer */
footer {
background: black;
padding: 10px 20px;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
#media (max-width: 600px) {
.mobile {
display: inline-block;
}
.desktop {
display: none;
}
}
<header>
<ul>
<li>Home</li>
<li>Menu</li>
<li><a class="logo" href="Home.html">Cadice_foto</a></li>
<li class="mobile">Locations</li>
<li class="mobile">Contacts</li>
<li class="desktop">Locations</li>
<li class="desktop">Contacts</li>
</ul>
</header>
<section class="features">
<figure>
<img src="images/porticciolo.jpg" alt="porticciolo Cadice">
<figcaption>Porticciolo Cadice</figcaption>
</figure>
<figure>
<img src="images/palme.jpg" alt="palme Cadice">
<figcaption>palme Cadice</figcaption>
</figure>
<figure>
<img src="images/sera.jpg" alt="sera Cadice">
<figcaption>sera Cadice</figcaption>
</figure>
</section>
<section>lower-section</section>
<footer>Via Condotti, Roma IT - numero: 02.123456 - email#email.com</footer>
This can be done with a css flex-box, and re-ordering the flex elements when your mobile view media query activates.
.menu-container {
display: flex;
flex-flow: row wrap;
text-align: center;
}
.menu-container>* {
padding: 10px;
flex: 1 20%;
}
#media all and (min-width: 600px) {
.menu-container>* {
flex: 1;
counter-increment: menulink;
order: counter(menulink);
}
.menu-left {
order: 1
}
.menu-right {
order: 3
}
.logo-menu {
order: 2;
}
}
body {
background-color: gray;
color: white;
font-family: Helvetica Neue;
}
/* Header */
header {
background-color: black;
background-image: url("http://placekitten.com/1000/500?image=6");
background-size: 100%;
background-position: center;
padding: 2px;
color: white;
height: 200px;
background-repeat: no-repeat
}
section {
background-color: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
a {
color: white;
text-decoration: none;
}
.logo {
background-image: url("http://placekitten.com/200/100");
background-size: 100px;
background-repeat: no-repeat;
display: inline-block;
height: 50px;
position: relative;
text-indent: -999999px;
top: 0px;
width: 100px;
border: solid lightblue;
}
/* Features */
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 10%;
box-shadow: gray 0 0 10px;
width: 200px;
}
/* Footer */
footer {
background: black;
padding: 10px 20px;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
.menu-container {
display: flex;
flex-flow: row wrap;
text-align: center;
}
.menu-container>* {
padding: 10px;
flex: 1 20%;
}
#media all and (min-width: 600px) {
.menu-container>* {
flex: 1;
counter-increment: menulink;
order: counter(menulink);
}
.menu-left {
order: 1
}
.menu-right {
order: 3
}
.logo-menu {
order: 2;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="11.css" type="text/css" />
</head>
<body>
<header class="menu-container">
<a class="menu-left" href="Home.html">Home</a>
<a class="menu-left" href="website/Menu.html">Menu</a>
<a class="menu-right"href="website/Locations.html">Locations</a>
<a class="menu-right" href="website/Contacts.html">Contacts</a>
<div class="logo-menu"><a class="logo" href="Home.html">Cadice_foto</a></div>
</header>
<section class="features">
<figure>
<img src="http://placekitten.com/150/150?image=2" alt="porticciolo Cadice">
<figcaption>Porticciolo Cadice</figcaption>
</figure>
<figure>
<img src="http://placekitten.com/150/150?image=8" alt="palme Cadice">
<figcaption>palme Cadice</figcaption>
</figure>
<figure>
<img src="http://placekitten.com/150/150?image=4" alt="sera Cadice">
<figcaption>sera Cadice</figcaption>
</figure>
</section>
<section>lower-section</section>
<footer>Via Lars, somewhere IT - numero: uno!- email#email.com</footer>
</body>
</html>
Add the following in media query below in your CSS:
.logo {
position: absolute;
top: 50px;
left: 0;
right: 0;
margin: 0 auto;
}
You may want to know what this code does. The position property specifies the type of positioning used for an element. The top property is the vertical position of a positioned element. The left and the right properties are written to reset positioning (these are "auto" by default), and then margin which is "0 auto" to align element by center. https://www.w3schools.com/css/css_margin.asp
You should probably see some info about media-queries here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
P.S. And remember DRY (Do not Repeat Yourself). Try to avoid writing twice, especially something like this:
<li class="mobile">Locations</li>
<li class="mobile">Contacts</li>
<li class="desktop">Locations</li>
<li class="desktop">Contacts</li>
You can set every property for every element in every media-query
I have changed your code little bit to achieve what you wanted. Here is the Code
body {
background-color: gray;
color: white;
font-family: Helvetica Neue;
}
/* Header */
header {
background-color: black;
background-image: url("https://www.hotelsantamargherita.it/wp-content/uploads/2017/12/caorle-dalla-spiaggia-di-pon-1440x500.jpg");
background-size: 100%;
background-position: center;
padding: 2px;
color: white;
height: 200px;
background-repeat: no-repeat;
}
section {
background-color: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
div {
background-color: black;
display: inline-block;
width: 100px;
margin: auto;
color: white;
}
.navbar {
margin: 0px;
padding: 0px;
text-align: center;
position: relative;
}
.navbar li {
text-decoration: none;
display: inline-block;
margin-right: 20px;
}
.navbar li a {
color: white;
text-decoration: none;
}
.logo a {
background-image: url("http://www.florenceholidays.com/image/66-05.jpg");
background-size: 100px;
background-repeat: no-repeat;
display: inline-block;
height: 50px;
position: relative;
text-indent: -9999px;
top: 0px;
width: 100px;
border: solid lightblue;
}
/* Features */
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 10%;
box-shadow: gray 0 0 10px;
width: 200px;
}
/* Footer */
footer {
background: black;
padding: 10px 20px;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
#media (max-width: 600px) {
.logo {
position: absolute;
top: 50px;
left: 50%;
transform: translatex(-50%)
}
}
<header>
<ul class="navbar">
<li>Home</li>
<li>Menu</li>
<li class="logo">Cadice_foto</li>
<li>Locations</li>
<li>Contacts</li>
<!-- <li class="desktop">Locations</li>
<li class="desktop">Contacts</li> -->
</ul>
</header>
<section class="features">
<figure>
<img src="https://picsum.photos/200/300" alt="porticciolo Cadice">
<figcaption>Porticciolo Cadice</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/200/300" alt="palme Cadice">
<figcaption>palme Cadice</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/200/300" alt="sera Cadice">
<figcaption>sera Cadice</figcaption>
</figure>
</section>
<section>lower-section</section>
<footer>Via Condotti, Roma IT - numero: 02.123456 - email#email.com</footer>