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>
Related
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>
I made an accordion menu using HTML and CSS but I am facing an issue:
I am able to close the menus with the '-' button, but one will always remain open.
How do I make it so I can close all questions if I need too (and also if I choose to open two questions, or even all three at the same time)?
Thank you.
.wizard-faq-section {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
}
.faq-container {
width: 100%;
margin: 0 auto;
max-width: 30em;
}
.accordion-link {
font-size: 0.875rem;
font-weight: 600;
border: 1px solid #f3f4f6;
border-radius: 4px;
margin-bottom: 0.9em;
padding: 0.5em 0 0.5em 2em;
text-decoration: none;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-link:focus {
background-color: #f3f4f6;
}
.accordion-link:hover {
color: #1468a0;
}
.accordion-link span {
color: #6366f1;
padding: .5rem;
}
.accordion-icon-remove {
display: none;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 650ms;
}
.faq-answer::before {
content: "";
position: absolute;
width: .6rem;
height: 90%;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.faq-answer p {
font-size: 0.875rem;
padding-left: 2em;
color: #6b7280
}
.accordion-item:target .faq-answer {
max-height: 20rem;
}
.accordion-item:target .accordion-link .accordion-icon-add {
display: none;
}
.accordion-item:target .accordion-link .accordion-icon-remove {
display: block;
}
<section class="wizard-faq-section">
<div class="faq-container">
<div class="faq-accordion">
<div class="accordion-item" id="faq-item-1">
<a class="accordion-link" href="#faq-item-1">
Q1
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa corrupti magni praesentium velit quo eum unde, accusamus dolorum cum eligendi!</p>
</div>
</div>
<div class="accordion-item" id="faq-item-2">
<a class="accordion-link" href="#faq-item-2">
Q2
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate cum laborum voluptates mollitia suscipit dicta ut temporibus. Nostrum provident dolorem, voluptatem sunt veniam maxime animi. Quisquam sit repudiandae reiciendis illo iusto nostrum harum, eius laudantium quidem et saepe provident doloremque blanditiis magni tenetur nulla autem eum, nemo veritatis? Itaque.</p>
</div>
</div>
<div class="accordion-item" id="faq-item-3">
<a class="accordion-link" href="#faq-item-3">
Q3
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quis, pariatur nesciunt quaerat alias aspernatur laudantium eaque sapiente veritatis nobis reiciendis adipisci, beatae aliquam dicta illum consectetur, reprehenderit quisquam non ad eum laboriosam illo eligendi ipsam quia. Hic, commodi eum!</p>
</div>
</div>
</div>
</div>
</section>
There are many things over.
First, you have not used js and expecting more from css
I have made it work by using JavaScript and toggle of classes, of active/clicked item
Snippet:
document.querySelectorAll(".accordion-link").forEach(function(item) {
item.onclick = function() {
if (!(document.querySelector(".accordion-link.clicked") == null) && !(document.querySelector(".accordion-link.clicked") == item)) {
document.querySelector(".accordion-link.clicked").classList.toggle("clicked");
}
document.activeElement.classList.toggle("clicked");
};
});
.wizard-faq-section {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
}
.faq-container {
width: 100%;
margin: 0 auto;
max-width: 30em;
}
.accordion-link {
font-size: 0.875rem;
font-weight: 600;
border: 1px solid #f3f4f6;
border-radius: 4px;
margin-bottom: 0.9em;
padding: 0.5em 0 0.5em 2em;
text-decoration: none;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-link.clicked {
background-color: #f3f4f6;
}
.accordion-link:hover {
color: #1468a0;
}
.accordion-link span {
color: #6366f1;
padding: .5rem;
}
.accordion-icon-remove {
display: none;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 650ms;
}
.faq-answer::before {
content: "";
position: absolute;
width: .6rem;
height: 90%;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.faq-answer p {
font-size: 0.875rem;
padding-left: 2em;
color: #6b7280
}
.clicked+.faq-answer {
max-height: 20rem;
}
.clicked .accordion-icon-add {
display: none;
}
.clicked .accordion-icon-remove {
display: block;
}
<section class="wizard-faq-section">
<div class="faq-container">
<div class="faq-accordion">
<div class="accordion-item" id="faq-item-1">
<a class="accordion-link" href="#faq-item-1">
Q1
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa corrupti magni praesentium velit quo eum unde, accusamus dolorum cum eligendi!</p>
</div>
</div>
<div class="accordion-item" id="faq-item-2">
<a class="accordion-link" href="#faq-item-2">
Q2
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate cum laborum voluptates mollitia suscipit dicta ut temporibus. Nostrum provident dolorem, voluptatem sunt veniam maxime animi. Quisquam sit repudiandae reiciendis illo iusto
nostrum harum, eius laudantium quidem et saepe provident doloremque blanditiis magni tenetur nulla autem eum, nemo veritatis? Itaque.</p>
</div>
</div>
<div class="accordion-item" id="faq-item-3">
<a class="accordion-link" href="#faq-item-3">
Q3
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quis, pariatur nesciunt quaerat alias aspernatur laudantium eaque sapiente veritatis nobis reiciendis adipisci, beatae aliquam dicta illum consectetur, reprehenderit quisquam non
ad eum laboriosam illo eligendi ipsam quia. Hic, commodi eum!</p>
</div>
</div>
</div>
</div>
</section>
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 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
My problem is that the text content is overflowing the box or container - what is the issue here ?
I heard about max-width and max-height but can't make it work.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Product Landing</title>
<link rel="stylesheet" href="product landing.css">
</head>
<body>
<main class="main-container">
<nav class="navbar-container">
<img src="logo.svg" class="logo-img">
<ul class="navbar">
<li class="select-items">Features</li>
<li class="select-items">Testimonials</li>
<li class="select-items">Pricing Table</li>
</ul>
</nav>
<section class="features">
<h1>The Benefits</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid</p>
<ul class="boxs">
<li>
<h2>GPS Tracking</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Heartbeat Analysis</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Security first</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Innovative idea</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Save your bills</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Proven technology</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
</ul>
</section>
<section class="testimonials"></section>
<section class="pricing"></section>
</main>
</body>
</html>
CSS
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.main-container {
background-color: brown;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
nav {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: blueviolet;
}
.logo-img {
margin-right: auto;
}
.navbar > li {
display: inline-block;
margin: 0px 10px;
padding: 5px 10px;
text-align: center;
}
.navbar > :nth-child(3){
color: aquamarine;
background-color: cornflowerblue;
border : 2px solid cornflowerblue;
padding: 5px 5px;
border-radius: 50px;
}
.navbar > li > a {
color: blanchedalmond;
text-decoration: none;
transition: all 0.7s ease 0s;
}
.navbar > li > a:hover {
color: crimson;
}
.features {
background-color: red;
height: 100%;
text-align: center;
display: grid;
}
.boxs {
list-style: none;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
grid-column-gap: 100px;
}
.testimonials {
background-color: yellow;
height: 100%;
}
.pricing {
background-color: green;
height: 100%;
}
max-width and flex-basis
When zooming, it helps to use non-px values for padding, font-size, margins, etc etc.
The font-size was set to the page default (16px) and the distance between columns was 100px -- these do not resize, so the content was overflowing the container.
See below example for how it looks using "view units" (vw units). View units are calculated according to the current screen size, so they scale even better than percents. They are calculated by dividing the screen into 100 wide by 100 tall, but they support partial units (e.g. 2.35vw) so they are quite granular.
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.main-container {
background-color: brown;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
nav {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: blueviolet;
}
.logo-img {
margin-right: auto;
}
.navbar > li {
display: inline-block;
margin: 0px 10px;
padding: 5px 10px;
text-align: center;
}
.navbar > :nth-child(3){
color: aquamarine;
background-color: cornflowerblue;
border : 2px solid cornflowerblue;
padding: 5px 5px;
border-radius: 50px;
}
.navbar > li > a {
color: blanchedalmond;
text-decoration: none;
transition: all 0.7s ease 0s;
}
.navbar > li > a:hover {
color: crimson;
}
.features {
background-color: red;
height: 100%;
text-align: center;
display: grid;
}
.boxs {
list-style: none;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
grid-column-gap: 10vw;
font-size:1.5vw;
}
.testimonials {
background-color: yellow;
height: 100%;
}
.pricing {
background-color: green;
height: 100%;
}
<main class="main-container">
<nav class="navbar-container">
<img src="logo.svg" class="logo-img">
<ul class="navbar">
<li class="select-items">Features</li>
<li class="select-items">Testimonials</li>
<li class="select-items">Pricing Table</li>
</ul>
</nav>
<section class="features">
<h1>The Benefits</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid</p>
<ul class="boxs">
<li>
<h2>GPS Tracking</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Heartbeat Analysis</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Security first</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Innovative idea</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Save your bills</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Proven technology</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
</ul>
</section>
<section class="testimonials"></section>
<section class="pricing"></section>
</main>
Reference:
https://css-tricks.com/fun-viewport-units/