For some reason I can't align the flex boxes to each other. is there a way to align it? Thanks!
.services {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
h1 {
font-size: 36px;
font-weight: 600;
}
p {
color: #777;
font-size: 14px;
font-weight: 300;
line-height: 22px;
padding: 10px;
}
.row {
margin-top: 5%;
display: flex;
justify-content: space-between;
}
.services-col {
flex-basis: 31%;
background: #fff3f3;
border-radius: 10px;
margin-bottom: 5%;
padding: 20px 12px;
box-sizing: border-box;
transition: 0.5s;
}
h3 {
text-align: center;
font-weight: 600;
margin: 10px 0;
}
.services-col:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
<section class="services">
<h1>Services We Offer</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<div class="row">
<div class="services-col">
<h3>Concrete Machinery Installation</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat minus aliquid incidunt suscipit, dolores qui magnam a obcaecati voluptates nesciunt!</p>
</div>
<div class="row">
<div class="services-col">
<h3>Electrical and Automation</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat minus aliquid incidunt suscipit, dolores qui magnam a obcaecati voluptates nesciunt!</p>
</div>
<div class="row">
<div class="services-col">
<h3>Heavy Equipments</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat minus aliquid incidunt suscipit, dolores qui magnam a obcaecati voluptates nesciunt!</p>
</div>
</div>
</section>
I think the display: flex should wrap all .services-col. Also, some end tag </div> were missing.
.services{
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
h1{
font-size: 36px;
font-weight: 600;
}
p{
color: #777;
font-size: 14px;
font-weight: 300;
line-height: 22px;
padding: 10px;
}
.row{
margin-top: 5%;
display: flex;
justify-content: space-between;
}
.services-col{
flex-basis: 31%;
background: #fff3f3;
border-radius: 10px;
margin-bottom: 5%;
padding: 20px 12px;
box-sizing: border-box;
transition: 0.5s;
}
h3{
text-align: center;
font-weight: 600;
margin: 10px 0;
}
.services-col:hover{
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
<section class="services">
<h1>Services We Offer</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<div class="row">
<div class="services-col">
<h3>Concrete Machinery Installation</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat minus aliquid incidunt suscipit, dolores qui magnam a obcaecati voluptates nesciunt!</p>
</div>
<div class="services-col">
<h3>Electrical and Automation</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat minus aliquid incidunt suscipit, dolores qui magnam a obcaecati voluptates nesciunt!</p>
</div>
<div class="services-col">
<h3>Heavy Equipments</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat minus aliquid incidunt suscipit, dolores qui magnam a obcaecati voluptates nesciunt!</p>
</div>
</div>
</section>
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 1 year ago.
I'm currently designing the about me section of my portfolio site (mobile version). The section is surrounded by two svg shapes. For some reason, between the content and the upper shape, there is a space that I can't figure out why is there.
Can anyone help me figure out why?
:root {
--color-main:#8049F5;
--color-secondary:#6E00FF;
--color-white:#fff;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
background-color: var(--color-main);
}
body {
line-height: 1.6;
font-family: "Poppins", sans-serif;
}
img {
width: 100%;
height: auto;
}
p {
font-size: 1.3rem;
}
.secondary-header {
text-transform: uppercase;
font-size: 1.9rem;
opacity: 0.8;
letter-spacing: 3px;
}
.introduction__content {
background-color: var(--color-secondary);
padding: 0 2rem;
}
.introduction__header {
color: var(--color-white);
text-align: center;
margin-bottom: 2rem;
}
.introduction__paragraph {
text-align: center;
color: var(--color-white);
opacity: 0.9;
}
.introduction__paragraph:not(:last-child) {
margin-bottom: 2rem;
}
<main>
<section class="introduction">
<img src="https://svgur.com/i/ZTL.svg" class="introduction__up-shape" alt="">
<div class="introduction__content">
<h2 class="introduction__header secondary-header">About me</h2>
<p class="introduction__paragraph">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil, placeat deserunt. Quae dolorum deserunt assumenda expedita. Excepturi eveniet iusto a.
</p>
<p class="introduction__paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, corrupti veniam cupiditate blanditiis ipsam enim fuga odio? Ut vel necessitatibus voluptas. Accusantium non velit nam.
</p>
<p class="introduction__paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium sed quasi beatae rerum id reiciendis eaque, ut doloremque, iusto amet non necessitatibus debitis commodi pariatur voluptates delectus libero deleniti consectetur!
</p>
</div>
<img src="https://svgur.com/i/ZQw.svg" alt="">
</section>
</main>
Simply make your .introduction__up-shape element a block element by applying display: block:
:root {
--color-main:#8049F5;
--color-secondary:#6E00FF;
--color-white:#fff;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
background-color: var(--color-main);
}
body {
line-height: 1.6;
font-family: "Poppins", sans-serif;
}
img {
width: 100%;
height: auto;
}
p {
font-size: 1.3rem;
}
.secondary-header {
text-transform: uppercase;
font-size: 1.9rem;
opacity: 0.8;
letter-spacing: 3px;
}
.introduction__content {
background-color: var(--color-secondary);
padding: 0 2rem;
}
.introduction__header {
color: var(--color-white);
text-align: center;
margin-bottom: 2rem;
}
.introduction__up-shape {
display: block;
}
.introduction__paragraph {
text-align: center;
color: var(--color-white);
opacity: 0.9;
}
.introduction__paragraph:not(:last-child) {
margin-bottom: 2rem;
}
<main>
<section class="introduction">
<img src="https://svgur.com/i/ZTL.svg" class="introduction__up-shape" alt="">
<div class="introduction__content">
<h2 class="introduction__header secondary-header">About me</h2>
<p class="introduction__paragraph">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil, placeat deserunt. Quae dolorum deserunt assumenda expedita. Excepturi eveniet iusto a.
</p>
<p class="introduction__paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, corrupti veniam cupiditate blanditiis ipsam enim fuga odio? Ut vel necessitatibus voluptas. Accusantium non velit nam.
</p>
<p class="introduction__paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium sed quasi beatae rerum id reiciendis eaque, ut doloremque, iusto amet non necessitatibus debitis commodi pariatur voluptates delectus libero deleniti consectetur!
</p>
</div>
<img src="https://svgur.com/i/ZQw.svg" alt="">
</section>
</main>
I have a left navbar that has a height of 100% but when there's any overflow the 100% height doesn't work.
I tried giving body and html height of 100% and min-height of 100%. I also tried giving the menu min-height: 100% and 100vh height. I read a lot of StackOverflow questions but none of the solutions worked for me.
Here's the code: Or codepen: shorturl.at/dgvFL
body {
width: 100vw;
height: 100vh;
font-family: fontReg;
overflow-x: hidden;
margin: 0;
font-family: Arial
}
.nav-bar {
min-height: 100vh;
width: 30%;
background-color: rgba(246, 245, 243, 1);
float: left;
overflow: auto;
}
.nav-bar ul {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 5%;
}
.t2 {
margin-bottom: 1000px;
background-color: #dddddd;
float: right;
width: 200px;
height: 200px;
}
.nav-bar ul li {
margin: calc(100vh * .01);
}
.services {
display: flex;
flex-direction: column;
}
.service {
width: 50%;
margin: 20px auto;
background-color: rgba(246, 245, 243, 1);
box-shadow: 2px 2px 2px 2px rgba(240, 131, 0, 1);
padding: 10px;
transition: 1s;
}
.service h1 {
color: orange;
font-size: calc(100vw * .05);
margin-top: 0;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: inherit;
}
<div class="nav-bar">
<ul>
<li>Home</li>
<li> All Blogs </li>
<li>About & Contact
<li>Create A Blog</li>
</ul>
</div>
<div class="services">
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
</div>
Use position: fixed if you want to fix navbar position.
body {
width: 100vw;
height: 100vh;
font-family: fontReg;
overflow-x: hidden;
margin: 0;
font-family: Arial;
}
.nav-bar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
min-height: 100vh;
width: 30%;
background-color: rgba(246, 245, 243, 1);
float: left;
overflow: auto;
}
.nav-bar ul {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 5%;
}
.t2 {
margin-bottom: 1000px;
background-color: #dddddd;
float: right;
width: 200px;
height: 200px;
}
.nav-bar ul li {
margin: calc(100vh * .01);
}
.services {
margin-left: 30%;
display: flex;
flex-direction: column;
}
.service {
width: 50%;
margin: 20px auto;
background-color: rgba(246, 245, 243, 1);
box-shadow: 2px 2px 2px 2px rgba(240, 131, 0, 1);
padding: 10px;
transition: 1s;
}
.service h1 {
color: orange;
font-size: calc(100vw * .05);
margin-top: 0;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: inherit;
}
<div class="nav-bar">
<ul>
<li>Home</li>
<li> All Blogs </li>
<li>About & Contact
<li>Create A Blog</li>
</ul>
</div>
<div class="services">
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
</div>
If I have a flexbox that is styled with flex-flow: column, and that container has five child div with variable heights, is it possible to make all the children be the same height as the tallest?
I'm not necessarily looking to fill the container with them (i.e. have them fill any excess space), just all be the same height.
In the snippet below, the five child div all have different content, which causes them to be different heights; is it possible to make all five be as tall as the uppermost div, which has the most content?
html {
font-family: Arial, sans-serif;
}
*,
*:before,
*:after {
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
}
body {
background: #333;
color: #333;
}
.container {
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
}
.panel {
background: white;
padding: 1rem;
}
.panel:nth-child(even) {
background: lightgrey;
}
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>
The simple answer is "no". Flexbox distributes space among flex items based on the size of the container, not the size of a particular sibling. You'll need to use a script.
If you don't mind them stretching to fit container height you can set children flex-basis to 20%:
html {
font-family: Arial, sans-serif;
}
*,
*:before,
*:after {
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
}
body {
background: #333;
color: #333;
}
.container {
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
}
.panel {
background: white;
padding: 1rem;
flex-basis: 20%;
}
.panel:nth-child(even) {
background: lightgrey;
}
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>
You can do this with flex-basis, with the catch that you have to know how many children there will be. You can also use flex-grow, but that only distributes the extra space available, so the tallest elements will still be taller than the shorter ones:
html {
font-family: Arial, sans-serif;
}
*,
*:before,
*:after {
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
}
body {
background: #333;
color: #333;
}
.container {
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
}
.panel {
background: white;
padding: 1rem;
flex-basis: 20%;
}
.panel:nth-child(even) {
background: lightgrey;
}
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>
I'm trying to make a fixed navbar at the top of my webpage, it's all pure HTML and CSS for now. The problem comes as a result of the fact that I want a button on the left side to open up a sidebar for navigation on mobile. I want to position the three navbar items in the center of the navbar, evenly spaced from eachother. As previously stated, I also want the navbar to be fixed so that it is visible no matter where the user scrolls on the page.
Here's the HTML
<!DOCTYPE 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>Cyberpunk Bar</title>
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.1/lux/bootstrap.min.css" rel="stylesheet" integrity="sha384-4KIc2mnKfAA7VjirNLk2Sqp7jxFNq1q8+FhYGxhW2l52lt4HJsfksL+hjswHfbl/" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<div id="navbar">
<ul id="navbar-menu">
<li>
<span class="open-slide">
<a href="#" onclick="">
<div><i id="open-button" class="fab fa-bitcoin"></i></div>
</a>
</span>
</li>
<li>Theme</li>
<li>Beer</li>
<li>Menu<li>
</ul>
</div>
<body>
<div class="pimg1">
<div class="ptext">
<span class="border">Cyberpunk Bar and Grill</span>
</div>
</div>
<section class="section section-light">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">Brilliant Beer Selection</span>
</div>
</div>
<section class="section section-light">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">Burgers and Steak</span>
</div>
</div>
<section id="section3" class="section section-dark">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</section>
<div class="pimg4">
<div class="ptext">
<span class="border">What are you waiting for?</span>
</div>
</div>
</body>
</html>
Here's the CSS
body, html
{
height: 100%;
margin: 0;
padding: 0;
font-size: 18px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
#navbar
{
height: 100px;
background-color: black;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 10;
filter:drop-shadow(0 5px 15px black);
}
#navbar-menu
{
display: inline-block;
text-align: center;
text-decoration: none;
list-style: none;
font-size: 25px;
margin: 0;
padding: 0;
color: white;
}
#open-button
{
color: white;
font-size: 50px;
padding-bottom: 25px;
padding-top: 25px;
}
#open-button:hover
{
color: #666;
}
.pimg1, .pimg2, .pimg3, .pimg4
{
position: relative;
opacity: 0.70;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* fixed = parallax, scroll = normal */
background-attachment: fixed;
}
.pimg1
{
background-image:url('https://i.imgur.com/bHJ4vHL.jpg?1');
min-height: 100%;
}
.pimg2
{
background-image:url('https://images.pexels.com/photos/338711/pexels-photo-338711.jpeg?cs=srgb&dl=alcohol-alcoholic-alcoholic-beverage-338711.jpg&fm=jpg');
min-height: 400px;
}
.pimg3
{
background-image:url('https://images.pexels.com/photos/156114/pexels-photo-156114.jpeg?cs=srgb&dl=beef-bread-burger-156114.jpg&fm=jpg');
min-height: 400px;
}
.pimg4
{
background-image:url('https://images.pexels.com/photos/696218/pexels-photo-696218.jpeg?cs=srgb&dl=adult-bar-blur-696218.jpg&fm=jpg');
min-height: 400px;
}
.section
{
text-align: center;
padding: 50px 80px;
}
.section-light
{
background-color: #f4f4f4;
color: #666;
}
.section-dark
{
background-color: #282E34;
color: #DDD;
}
.ptext
{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #000;
font-size: 32px;
letter-spacing: 8px;
text-transform: uppercase;
}
.ptext .border
{
background-color: #111;
color: white;
padding: 20px;
}
Is using a the best practice for this? Please help!
$(".open-slide").click(function() {
$(this).toggleClass("opend");
});
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-size: 18px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
#navbar {
height: 100px;
background-color: black;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 10;
filter: drop-shadow(0 5px 15px black);
}
#navbar-menu {
display: inline-block;
text-align: center;
text-decoration: none;
list-style: none;
font-size: 25px;
margin: 0;
padding: 0;
color: white;
}
#open-button {
color: white;
font-size: 50px;
padding-bottom: 25px;
padding-top: 25px;
display:none;
}
#open-button:hover {
color: #666;
}
.pimg1 {
/*margin-top:100px;*/
}
.pimg1,
.pimg2,
.pimg3,
.pimg4 {
position: relative;
opacity: 0.70;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* fixed = parallax, scroll = normal */
background-attachment: fixed;
}
.pimg1 {
background-image: url('https://i.imgur.com/bHJ4vHL.jpg?1');
min-height: 100%;
}
.pimg2 {
background-image: url('https://images.pexels.com/photos/338711/pexels-photo-338711.jpeg?cs=srgb&dl=alcohol-alcoholic-alcoholic-beverage-338711.jpg&fm=jpg');
min-height: 400px;
}
.pimg3 {
background-image: url('https://images.pexels.com/photos/156114/pexels-photo-156114.jpeg?cs=srgb&dl=beef-bread-burger-156114.jpg&fm=jpg');
min-height: 400px;
}
.pimg4 {
background-image: url('https://images.pexels.com/photos/696218/pexels-photo-696218.jpeg?cs=srgb&dl=adult-bar-blur-696218.jpg&fm=jpg');
min-height: 400px;
}
.section {
text-align: center;
padding: 50px 80px;
}
.section-light {
background-color: #f4f4f4;
color: #666;
}
.section-dark {
background-color: #282E34;
color: #DDD;
}
.ptext {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #000;
font-size: 32px;
letter-spacing: 8px;
text-transform: uppercase;
}
.ptext .border {
background-color: #111;
color: white;
padding: 20px;
}
/* new css */
.open-slide {
display: none;
}
#navbar-menu {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#navbar-menu>li {
height: 100px;
line-height: 100px;
}
.menus-nav.fixed-header {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
#media(max-width:767px) {
.open-slide {
display: block;
}
.open-slide+#navbar-menu {
max-height: 0;
position: relative;
-webkit-transition: max-height 1000ms ease;
transition: max-height 1000ms ease;
overflow: hidden;
}
.open-slide.opend+#navbar-menu {
max-height: 300px;
}
#navbar {
height: auto;
}
#navbar-menu {
display: block !important;
display: block !important;
display: block !important;
display: block !important;
display: block !important;
-webkit-flex-flow: inherit !important;
justify-content: inherit !important;
}
#navbar-menu>li {
height: auto;
}
#navbar-menu>li {
height: auto;
line-height: 1em;
padding: 10px 15px;
text-align: left;
border-bottom: 1px solid #222222;
}
#open-button {
display:block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/todc-bootstrap/3.3.7-3.3.13/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/todc-bootstrap/3.3.7-3.3.13/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<body>
<!-- menu -->
<div id="navbar" class="menus-nav fixed-header">
<i id="open-button" class="fab fa-bitcoin open-slide" onclick=""></i>
<ul id="navbar-menu">
<li>Theme</li>
<li>Beer</li>
<li>Menu</li>
</ul>
</div>
<!-- menu -->
<div class="pimg1">
<div class="ptext">
<span class="border">Cyberpunk Bar and Grill</span>
</div>
</div>
<section class="section section-light">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">Brilliant Beer Selection</span>
</div>
</div>
<section class="section section-light">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">Burgers and Steak</span>
</div>
</div>
<section id="section3" class="section section-dark">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</section>
<div class="pimg4">
<div class="ptext">
<span class="border">What are you waiting for?</span>
</div>
</div>
</body>
First of all our <div id="navbar"> have to be inside <body> tag.
Check here for edited parts of code:
HTML:
<body>
<div id="navbar">
<ul id="navbar-menu">
<li>
<span class="open-slide">
<a href="#" onclick="">
<div><i id="open-button" class="fab fa-bitcoin"></i></div>
</a>
</span>
</li>
<li>Theme</li>
<li>Beer</li>
<li>Menu<li>
</ul>
</div>
.....
</body>
</html>
CSS:
#navbar {
position: fixed;
top: 0;
width: 100%;
height: 100px;
background-color: black;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 10;
filter:drop-shadow(0 5px 15px black);
}
#navbar-menu {
width: max-content;
margin: 0 auto;
}
#navbar-menu li {
display: inline-block;
text-align: center;
text-decoration: none;
list-style: none;
font-size: 25px;
margin: 0;
padding: 0 40px;
color: white;
}
https://codepen.io/Yulia_pi/pen/yjRQgy
Why do these blocks depend on each other on hover? How can I make them hover independently? As of now, the first list__item depends on the second list__item.
.list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin: 0;
padding: 0;
}
.list__item {
background: none;
border: 1px solid grey;
list-style: none outside;
display: flex;
flex-direction: column;
justify-content: center;
width: 23.72%;
margin: 0 0 20px 1.7%;
word-wrap: break-word;
}
.list__item:hover .list__descr {
display: block;
}
.list__name {
font-size: 14px;
color: #333;
font-weight: 700;
line-height: 1.286;
padding: 20px 8px;
height: 73px;
}
.list__descr {
display: none;
padding: 0 8px;
font-size: 12px;
color: #505050;
}
.list__descr-more {
font-size: 11px;
color: #787878;
line-height: 1.909;
padding-left: 10px;
padding-bottom: 10px;
}
<ul class="list">
<li class="list__item">
<div class="list__img">
</div>
<div class="list__title">
Lorem ipsum dolor sit amet, consectetur.
</div>
<p class="list__descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.</p>
<div class="list__descr-more">Lorem ipsum dolor.</div>
</li>
<li class="list__item">
<div class="list__img">
</div>
<div class="list__title">
Lorem ipsum dolor sit amet, consectetur.
</div>
<p class="list__descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.</p>
<div class="list__descr-more">Lorem ipsum dolor.</div>
</li>
</ul>
This is because of the align-items: stretch, which is by default and makes flex-items stretch to fill the flex-container along the cross axis, where their height is dictated by the height of the "tallest" one.
So in order to prevent that just change the value to flex-start, which will then preserve their height as it is:
.list {
display: flex;
flex-wrap: wrap;
align-items: flex-start; /* modified */
margin: 0;
padding: 0;
}
.list__item {
background: none;
border: 1px solid grey;
list-style: none outside;
display: flex;
flex-direction: column;
justify-content: center;
width: 23.72%;
margin: 0 0 20px 1.7%;
word-wrap: break-word;
}
.list__item:hover .list__descr {
display: block;
}
.list__name {
font-size: 14px;
color: #333;
font-weight: 700;
line-height: 1.286;
padding: 20px 8px;
height: 73px;
}
.list__descr {
display: none;
padding: 0 8px;
font-size: 12px;
color: #505050;
}
.list__descr-more {
font-size: 11px;
color: #787878;
line-height: 1.909;
padding-left: 10px;
padding-bottom: 10px;
}
<ul class="list">
<li class="list__item">
<div class="list__img"></div>
<div class="list__title">
Lorem ipsum dolor sit amet, consectetur.
</div>
<p class="list__descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.</p>
<div class="list__descr-more">Lorem ipsum dolor.</div>
</li>
<li class="list__item">
<div class="list__img"></div>
<div class="list__title">
Lorem ipsum dolor sit amet, consectetur.
</div>
<p class="list__descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.</p>
<div class="list__descr-more">Lorem ipsum dolor.</div>
</li>
</ul>