I want to add a profile picture on the left side of the home in the navigation panel can anyone tell me how can I do that without javascript just using HTML and CSS
I want a picture on the top left part of the webpage and I tried many time and can't figure out how
Thank You
--------------------------------------------------------------------------------------
Code:
<!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">
<title>PS 2</title>
<style>
*{
padding: 0;
margin: 0;
}
header{
background-color: black;
color: white;
position: sticky;
top: 0;
}
ul{
padding: 19px;
}
li{
list-style: none;
display: inline;
padding: 0 53px;
font-size: 33px;
}
.container{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
.left{
background-color: red;
height: 80vh;
width: 40vw;
}
.right{
background-color: blue;
height: 80vh;
width: 40vw;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div class="container">
<div class="left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequuntur porro recusandae beatae, debitis sapiente, adipisci nostrum voluptate pariatur veniam, aliquid iusto consequatur nemo quidem. Quia eveniet fugit mollitia tempora harum eligendi modi natus?
</p>
</div>
<div class="right">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, totam sapiente unde quos, quia dolor et natus tenetur, nesciunt tempora cum. Facilis laboriosam quas consectetur, placeat adipisci consequuntur consequatur cupiditate deserunt veritatis odit natus delectus tempore possimus, aspernatur ex amet quaerat vero sequi praesentium inventore. Facere distinctio magni, praesentium modi nemo sit quibusdam laudantium molestiae. Provident.
</p>
</div>
</div>
</body>
</html>
I've made your nav a flex container and used a div to place your image on the lhs of your navbar. The image is placed in the center of the div using grid and place-items:center.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
background-color: black;
color: white;
position: sticky;
top: 0;
}
nav {
display: flex;
padding: 1rem 2rem;
}
.image {
flex: 0 1 auto;
display: grid;
place-items: center;
}
.image>img {
width: 4rem;
}
ul {
padding: 19px;
}
li {
list-style: none;
display: inline;
padding: 0 53px;
font-size: 33px;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
.left {
background-color: red;
height: 80vh;
width: 40vw;
}
.right {
background-color: blue;
height: 80vh;
width: 40vw;
}
<header>
<nav>
<div class="image"><img src="https://www.fillmurray.com/500/500"></div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div class="container">
<div class="left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequuntur porro recusandae beatae, debitis sapiente, adipisci nostrum voluptate pariatur veniam, aliquid iusto consequatur nemo quidem. Quia eveniet fugit mollitia tempora harum eligendi
modi natus?
</p>
</div>
<div class="right">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, totam sapiente unde quos, quia dolor et natus tenetur, nesciunt tempora cum. Facilis laboriosam quas consectetur, placeat adipisci consequuntur consequatur cupiditate deserunt veritatis odit
natus delectus tempore possimus, aspernatur ex amet quaerat vero sequi praesentium inventore. Facere distinctio magni, praesentium modi nemo sit quibusdam laudantium molestiae. Provident.
</p>
</div>
</div>
change your css header to
header{
background-color: black;
color: white;
position: sticky;
top: 0;
display: flex;
align-items: center;
}
and add the class
.header-img {
width: 50px;
height: 50px;
background-color: red;
margin: 10px;
}
and now you can add in your html header
<img class="header-img" src=""/>
in src="" you can chose the path of your img
Add a list element in the header.
<ul>
<li><img src="https://smaller-pictures.appspot.com/images/dreamstime_xxl_65780868_small.jpg" alt="Girl in a jacket" width="50" height="50"></li>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
Related
Text is not there but it is taking space like margin overlapping. When you will run the code you see that red one has 2 lines and green one has 6 lines thus it is taking space of 4 lines in its horizontal and other two line is overlapping with the red's line. How can I remove the extra white space of green ones
<!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">
<title>Practice 04</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
background-color: black;
height: 25px;
color: white;
}
.nav ul li{
display: inline-block;
font-size: 20px;
margin: 0px 50px;
}
.red{
background-color: red;
width: 50%;
height: 90vh;
display: inline-block;
white-space: normal;
}
.green {
background-color: green;
width: 50%;
height: 90vh;
display: inline-block;
}
footer{
background-color: black;
color: white;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div class="nav">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="red">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi itaque placeat natus voluptatum in autem eaque vero deserunt dolore eius?</div><div class="green">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus porro ducimus autem vel eveniet, numquam voluptatem laborum saepe vero nisi. ral Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, quos! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem itaque quia ipsa voluptatem tempore quibusdam enim nihil totam quidem sunt provident, vero illo pariatur tempora perferendis minima eos maxime voluptatibus! Blanditiis facere nihil sed, repellendus expedita placeat est repellat deleniti at. Voluptates ad animi veniam commodi vel dolorum placeat molestiae.</div>
<footer>
Copyright ©:Razz Developers
</footer>
</body>
</html>
First place your contents inside a container and then set
display:flex;
In this way
.container {
display: flex;
}
here is your full code
<!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">
<title>Practice 04</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
background-color: black;
height: 25px;
color: white;
}
.nav ul li {
display: inline-block;
font-size: 20px;
margin: 0px 50px;
}
.container {
display: flex;
}
.red {
background-color: red;
width: 50%;
height: 90vh;
display: inline-block;
white-space: normal;
}
.green {
background-color: green;
width: 50%;
height: 90vh;
display: inline-block;
}
footer {
background-color: black;
color: white;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div class="nav">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="container">
<div class="red">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi itaque placeat natus
voluptatum
in autem eaque vero deserunt dolore eius?</div>
<div class="green">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus porro ducimus autem vel
eveniet, numquam voluptatem laborum saepe vero nisi. ral Lorem ipsum dolor sit amet consectetur adipisicing
elit. Illum, quos! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem itaque quia ipsa
voluptatem
tempore quibusdam enim nihil totam quidem sunt provident, vero illo pariatur tempora perferendis minima eos
maxime voluptatibus! Blanditiis facere nihil sed, repellendus expedita placeat est repellat deleniti at.
Voluptates ad animi veniam commodi vel dolorum placeat molestiae.</div>
</div>
<footer>
Copyright ©:Razz Developers
</footer>
</body>
</html>
Use the 'table-cell' property instead of 'inline-block'.
.red{
background-color: red;
width: 50%;
height: 90vh;
display: table-cell;
white-space: normal;
}
.green {
background-color: green;
width: 50%;
height: 90vh;
display: table-cell;
}
I am trying to postition a footer to the bottom of my screen no matter the size of the screen, i've tried wrapping it in anoter conatiner. Justifying the content and aligning the items. I have tried using vh measurements and have tried messing with the height of the container div. Nothing seems to be nudging it lol. In codepen it seems to go to the bottom, but that's probably because codepen isn't a full sized screen.
<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">
<title>The Holy Grail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="contents">
<div class="sidebar">
⭐ - link one
🦸🏽♂️ - link two
🖌️ - link three
👌🏽 - link four
</div>
<div class="Cards">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="down">
<div class="footer">
The Odin Project ❤️
</div>
</div>
</body>
</html>```
CSS: body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
}
.Cards {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
flex: 1 1 0;
}
.contents {
display: flex;
flex-direction: row;
}
.header {
display: flex;
justify-content: flex-start;
padding-inline-start: 10px;
font-size: 30px;
font-weight: 700;
align-items: center;
height: 72px;
background: darkmagenta;
color: white;
}
.down {
display: flex;
flex-direction: column;
justify-items: end;
height: 60%;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
height: 10vh;
background: #eee;
color: darkmagenta;
}
.sidebar {
margin: 0;
display: flex;
flex-direction: column;
height: 700px;
width: 300px;
background: royalblue;
}
.sidebar a {
text-decoration: none;
font-size: 20px;
margin: 0;
}
.card {
height: 200px;
width:200px;
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
border-radius: 4px;
}
You can do that by setting positions. Give your body element a position: relative; and .footer
position: absolute; /* so you can position the footer relative to the body */
width: 100%; /* to make the footer span the entire view port */
bottom: 0; /* and finally to the bottom */
Code:
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 72px;
background: darkmagenta;
color: white;
font-size: 32px;
font-weight: 900;
padding-left: 16px;
display: flex;
align-items: center;
}
.footer {
height: 72px;
background: #eee;
color: darkmagenta;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar {
width: 300px;
background: royalblue;
flex-shrink: 0;
padding: 16px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 16px;
}
a {
text-decoration: none;
color: white;
font-size: 24px;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
border-radius: 4px;
margin: 16px;
padding: 16px;
}
.container {
padding: 32px;
display: flex;
flex-wrap: wrap;
}
.body {
display: flex;
flex: 1;
}
<!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">
<title>The Holy Grail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="body">
<div class="sidebar">
<ul>
<li>⭐ - link one</li>
<li>🦸🏽♂️ - link two</li>
<li>🖌️ - link three</li>
<li>👌🏽 - link four</li>
</ul>
</div>
<div class="container">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
</body>
</html>
Here I added the display: flex; and flex-wrap: wrap; for the class container, with class card as flex items. However the cards are not wrapping. I checked the parent body and it has display: flex; set so I don't know where I went wrong.
This is the output I am getting
This is the desired outcome
You can apply a fixed-width to your cards. Without defining a width, flex-box is going to try to determine the width for them, based on the screen size. If you set a fixed-width the cards will keep that width upon resizing the browser, which then your flex-wrap: wrap; on your container will kick in and wrap them when there is not enough space. I added width: 350px; to your card See the changes below.
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 72px;
background: darkmagenta;
color: white;
font-size: 32px;
font-weight: 900;
padding-left: 16px;
display: flex;
align-items: center;
}
.footer {
height: 72px;
background: #eee;
color: darkmagenta;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar {
width: 300px;
background: royalblue;
flex-shrink: 0;
padding: 16px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 16px;
}
a {
text-decoration: none;
color: white;
font-size: 24px;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
border-radius: 4px;
margin: 16px;
padding: 16px;
width: 350px;
min-width: 150px;
}
.container {
padding: 32px;
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
}
.body {
display: flex;
flex: 1;
}
<!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">
<title>The Holy Grail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="body">
<div class="sidebar">
<ul>
<li>⭐ - link one</li>
<li>🦸🏽♂️ - link two</li>
<li>🖌️ - link three</li>
<li>👌🏽 - link four</li>
</ul>
</div>
<div class="container">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
</body>
</html>
Be ensure your flex item have maximum width . than the main container will be wrapping.
.card {
max-width: 200px;
}
I want to create this mini website I am trying but I have some problems.
1- I want to color the ul list but only 2 of them work.
2- there is white space in the width I am trying to minimize the width of but didn't work ,
I copied the code on codepen and this is a picture of what I want. Please help me . thank you.
This is how the program looks like:
This is my code: https://codepen.io/aminanba/pen/VwpOZRB
article{
width: 80%;
}
.item1 {
grid-area:item1;
border: 2px solid black;
}
.item2 {
grid-area: item2;
border: 2px solid black;
}
.item3 {
grid-area: item3;
border: 2px solid black;
}
.item4 {
grid-area: item4;
border: 2px solid black;
}
.item5 {
grid-area: item5;
border: 2px solid black;
}
.grid-container {
display: grid;
grid-template-columns: 25% 50% 25% 25% 75%;
grid-template-rows: auto;
grid-template-areas:
"item1 item2 item2 item3"
"item4 item5 item5 item5"
;
}
h3{
font-style: italic;
text-align: center;
}
p{
margin: 10px;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
To fix the first one you need to close your a tags, like this;
<ul class="grid-item item5">
<li>Politics</li>
<li>Technology</li>
<li>Local</li>
<li>Opinion</li>
<li>Sports</li>
</ul>
For the second one you need to make sure you do not have and margin or padding in your ul / li elements. By default the browser adds some padding to the elements. To fix this just set it to 0 for every element at the start of your stylesheet and then add margin/padding accordingly. So in your css just add at the very top the following;
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
i fix this with css grid but in the second section i used flexbox it is usefull
*{
box-sizing: border-box;
}
header{
text-align: center;
font-family: 'Merienda', cursive;
margin-bottom: 45px;
}
article{
width: 80%;
}
.item1 {
grid-area:item1;
border: 2px solid black;
}
.item2 {
grid-area: item2;
border: 2px solid black;
}
.item3 {
grid-area: item3;
border: 2px solid black;
}
.item4 {
grid-area: item4;
border: 2px solid black;
}
.item5 {
grid-area: item5;
border: 2px solid black;
}
.grid-container {
display: grid;
grid-template-columns: 25% 50% 25% 25% 75%;
grid-template-rows: auto;
grid-template-areas:
"item1 item2 item2 item3"
"item4 item5 item5 item5"
;
}
h3{
font-style: italic;
text-align: center;
font-weight: normal;
font-size: 1.3em;
padding-bottom: 10px;
}
p{
margin: 10px;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.other-sections {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
height: 100%;
padding: 0;
margin: 0;
}
.site-section {
display: flex;
align-items: center;
flex: 1;
}
.section-link {
color: black;
text-decoration: none;
font-size: 30px;
padding-left: 30px;
font-weight: bold;
font-family: "Futura";
color: #666;
}
.section-link:hover {
text-decoration: underline;
}
.site-section-local {
background-color: #55efc4;
}
.site-section-tech {
background-color: #81ecec;
}
.site-section-opinion {
background-color: #74b9ff;
}
.site-section-sports {
background-color: #a29bfe;
}
.site-section-politics {
background-color: #ffeaa7;
}
<!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">
<title>News Papers</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merienda&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>The News Times</h1>
</header>
<article class="grid-container">
<section class="item1">
<div class="grid-item">
<h3>Student Learns HTML</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic ad in quas alias non! Expedita similique et dolore illum
doloremque vel accusantium ut eos tempora sequi, doloribus vitae mollitia praesentium ex ullam? Dolorem labore fugiat
neque nostrum porro vero fugit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam corrupti, eius odio
neque incidunt esse fuga veritatis ipsum, eligendi mollitia, porro quasi provident nisi sit! Doloribus, eligendi nemo,
ad laudantium cupiditate aspernatur eveniet asperiores modi praesentium voluptas eos sunt odio.</p>
</div>
</section >
<section class="item2">
<div class="grid-item">
<h3>BREAKING: Puppies Are Adorable</h3>
<img src="http://placecorgi.com/300/150" style="width:100%;" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, dolores? Illo dolores, rerum iste aut porro doloribus fugit itaque voluptas</p>.
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium incidunt ullam ea magni ipsam perferendis ratione pariatur enim repellendus quia?</p>
</div>
</section >
<section class="item3">
<div class="grid-item">
<h3>CSS Is Apparently a Thing</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic ad in quas alias non! Expedita similique et dolore illum
doloremque vel accusantium ut eos tempora sequi, doloribus vitae mollitia praesentium ex ullam? Dolorem labore fugiat
neque nostrum porro vero fugit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam corrupti, eius odio
neque incidunt esse fuga veritatis ipsum, eligendi mollitia, porro quasi provident nisi sit! Doloribus, eligendi nemo,
ad laudantium cupiditate aspernatur eveniet asperiores modi praesentium voluptas eos sunt odio.</p>
</div>
</section>
<section class="item4">
<div class="grid-item">
<h3>Boy Likes Turtles</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, perferendis! Accusamus asperiores quod vitae architecto natus alias fugiat aliquam unde sint expedita repellat rerum, obcaecati hic placeat recusandae quaerat. Dolores excepturi earum minus magni! Animi aperiam eligendi molestias necessitatibus ducimus.
Voluptate, ut, cupiditate ducimus vitae blanditiis ex impedit debitis est tempora dolores nam sed. Esse nobis ea inventore qui enim quia beatae ab commodi laboriosam quam aliquam aut perspiciatis fuga nam rerum temporibus voluptatum explicabo voluptate, pariatur ullam laudantium eligendi.</p>
</div>
</section>
<section class="item5">
<ul class="story three-quarter other-sections">
<li class="site-section site-section-politics">
<a href="#" class="section-link">
Politics
</a>
</li>
<li class="site-section site-section-tech">
<a href="#" class="section-link">
Technology
</a>
</li>
<li class="site-section site-section-local">
<a href="#" class="section-link">
Local
</a>
</li>
<li class="site-section site-section-opinion">
<a href="#" class="section-link">
Opinion
</a>
</li>
<li class="site-section site-section-sports">
<a href="#" class="section-link">
Sports
</a>
</li>
</ul>
</section>
</article>
<script src="script.js">
</script>
</body>
</html>
I have a flexbox navbar that I've been having great troubles with trying to make responsive (hence the question). I wish for the horizontal padding between the links to decrease as the page width decreases. With the main issue being that I'm unable to stop the contact us link at the end from being overlayed by the browser window when shrunk as shown in photo below.
I am also curious to whether this is possible without the use of media queries or if I'm trying to make things difficult for myself.
Hope someone with some more knowledge than me can help as I've spent far too many hours on this aha.
Phone size screen
<!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" />
<title>Home Page</title>
</head>
<body>
<header>
<img src="Images/logo.png" alt="logo" id="logo" />
<!--Logo-->
<nav>
<ul class="nav_links">
<li>Home</li>
<li>Merchandise</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div class="flex-container">
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque
asperiores veritatis dicta ipsum! Enim cupiditate laborum voluptatem
ipsa incidunt optio nulla facilis natus?
</p>
</div>
</body>
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque asperiores
veritatis dicta ipsum! Enim cupiditate laborum voluptatem ipsa incidunt
optio nulla facilis natus?
</p>
</div>
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque asperiores
veritatis dicta ipsum! Enim cupiditate laborum voluptatem ipsa incidunt
optio nulla facilis natus?
</p>
</div>
</div>
</html>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(to top, #ddf2eb, #d3cdd7);
background-repeat: no-repeat;
height: 100vh;
}
header {
display: flex;
padding: 10px 0;
background-color: #ddf2eb;
align-items: center;
}
#logo {
height: 70px;
width: 70px;
cursor: pointer;
flex-shrink: 0;
margin-left: 2%;
}
.nav_links {
list-style: none;
margin-left: 10%;
white-space: nowrap;
min-width: 0;
min-height: 0;
max-width: 800px;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0;
font-family: "Montserrat", "sans-serif";
font-weight: 500;
font-size: 15px;
color: #606d5d;
text-decoration: none;
}
.nav_links li a:hover {
color: honeydew;
}
.flex-container {
display: flex;
}
You really want to use justify-content: space-between which is completely flexible and therefore responsive without having to do anything else. If you put it on the head it will have space between the logo and nav and on the .nav-links it will have space between the nav links as you want.
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
background-color: #ddf2eb;
}
.nav_links {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
max-width: 800px;
}
I can suggest such a way. Sample:
#media (max-width:600px) {
.nav_links li {
padding: 0px 3px;
}
.nav_links li a {
font-size: 11px;
}
}
Link: https://codepen.io/en0ndev/pen/WNoWwOo
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(to top, #ddf2eb, #d3cdd7);
background-repeat: no-repeat;
height: 100vh;
}
header {
display: flex;
padding: 10px 0;
background-color: #ddf2eb;
align-items: center;
}
#logo {
height: 70px;
width: 70px;
cursor: pointer;
flex-shrink: 0;
margin-left: 2%;
}
.nav_links {
list-style: none;
margin-left: 10%;
white-space: nowrap;
min-width: 0;
min-height: 0;
max-width: 800px;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0;
font-family: "Montserrat", "sans-serif";
font-weight: 500;
font-size: 15px;
color: #606d5d;
text-decoration: none;
}
.nav_links li a:hover {
color: honeydew;
}
.flex-container {
display: flex;
}
#media (max-width:800px) {
.nav_links li {
padding: 0px 10px;
}
}
#media (max-width:700px) {
.nav_links li {
padding: 0px 5px;
}
.nav_links li a {
font-size: 13px;
}
}
#media (max-width:600px) {
.nav_links li {
padding: 0px 3px;
}
.nav_links li a {
font-size: 11px;
}
}
<!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" />
<title>Home Page</title>
</head>
<body>
<header>
<img src="Images/logo.png" alt="logo" id="logo" />
<!--Logo-->
<nav>
<ul class="nav_links">
<li>Home</li>
<li>Merchandise</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div class="flex-container">
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque
asperiores veritatis dicta ipsum! Enim cupiditate laborum voluptatem
ipsa incidunt optio nulla facilis natus?
</p>
</div>
</body>
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque asperiores
veritatis dicta ipsum! Enim cupiditate laborum voluptatem ipsa incidunt
optio nulla facilis natus?
</p>
</div>
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque asperiores
veritatis dicta ipsum! Enim cupiditate laborum voluptatem ipsa incidunt
optio nulla facilis natus?
</p>
</div>
</div>
</html>
.nav_links {
display: flex;
list-style: none;
margin-left: 10%;
min-width: 0;
min-height: 0;
max-width: 800px;
}
.nav_links li {
display: inline-block;
padding: 0px 1.5vw;
}
Do this instead. white space: nowrap was was causing it also your padding was set using pixels which arent responsive so i set to vw