I know there has been a lot of questions and answers about how to control the overflow of a parent container using flexbox. I couldn't find a solution to this problem so here is another question about it.
What I want
The part where the problem is, is commented in the HTML.
What I get
Here is the code. You might have to copy and paste the code in...:(
html {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-height: 100%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
}
body {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
#voolvern_main .voolvern_grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.voolvern_gflex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
a {
text-decoration: none;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.voolvern_grid .voolvern_gridflex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#voolvern_main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
#media (min-width: 40rem) {
#voolvern_pcard_section.voolvern_stack_two .voolvern_item {
width: 50%;
}
}
#media (min-width: 56rem) {
#voolvern_pcard_section.voolvern_stack_two .voolvern_item {
width: 32.99999%;
}
}
#voolvern_main>#voolvern_mainaside.voolvern_aside {
-webkit-box-flex: 1;
-ms-flex: 1 1 1rem;
flex: 1 1 1rem;
}
#voolvern_main>#voolvern_rightaside.voolvern_aside {
width: 32%;
}
#voolvern_main>.voolvern_aside>.voolvern_uid {
width: 100%;
}
.voolvern_stackhandler>.voolvern_stackpad {
padding-right: 1.2rem;
padding-left: 1.2rem;
}
.voolvern_group.voolvern_nuid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#voolvern_toolbar>.voolvern_group {
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
#voolvern_toolbar>.voolvern_group.voolvern_nuid>.voolvern_nitem .voolvern_span {
padding-top: .8rem;
padding-bottom: .8rem;
padding-right: 1rem;
padding-left: 1rem;
border-radius: 10%;
}
#voolvern_toolbar>.voolvern_group.voolvern_nuid>.voolvern_nitem .voolvern_span:hover {
background: lightgray;
}
.voolvern_stackpad>.voolvern_header>.voolvern_group {
height: 3.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<!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">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://kit.fontawesome.com/db35900820.js">
</script>
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-font-face.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<title>vvnfinal</title>
<link rel="icon" href="https://cdn.dribbble.com/users/1097/screenshots/168079/newv2.png">
</head>
<body class="voolvern_grid">
<main id="voolvern_main" class="voolvern_gridflex" style="flex: 1rem">
<aside id="voolvern_mainaside" class="voolvern_aside voolvern_gridflex">
<section class="voolvern_uid voolvern_stackhandler" style=" flex-direction: column; display: flex">
<!-- begin:: header -->
<div class="voolvern_stackpad">
<section id="voolvern_mainasideheader" class="voolvern_header">
<div class="voolvern_group voolvern_nuid">
<span>left</span>
<span>left</span>
</div>
</section>
</div>
<!-- end:: header -->
<div style="flex: 1; border-bottom: .01rem solid lightgray">
<section style="overflow-y: scroll;">
<!-- here is the div that when givin a height of 40rem+ it cuzes the <section> to push down all the contents after it,
I want the <section> to stay put and is scrollable when that happens but I can't seem to figure that out.
-->
<div style="height: 40rem">content</div>
</section>
</div>
<!-- begin:: toolbar -->
<div class="voolvern_stackpad">
<section id="voolvern_toolbar">
<span class="voolvern_group voolvern_nuid">
<!-- begin:: toolbar items -->
<div class="voolvern_nitem">
<a href="/Projects">
<span class="voolvern_span">
<i class="far fa-lightbulb" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Subsidiaries" class="">
<span class="voolvern_span">
<i class="fab fa-hubspot" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Discover" class="">
<span class="voolvern_span">
<i class="fas fa-shopping-bag" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Discover" class="">
<span class="voolvern_span">
<i class="fas fa-globe-americas" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Support" class="">
<span class="voolvern_span">
<i class="fas fa-hands-helping" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Support" class="">
<span class="voolvern_span">
<i class="fab fa-ioxhost" aria-hidden="true">
</i>
</span>
</a>
</div>
<!-- end:: toolbar itemns-->
</span>
</section>
</div>
<!-- end:: toolbar -->
</section>
</aside>
<aside id="voolvern_rightaside" class="voolvern_aside voolvern_nuid">
<section class="voolvern_uid voolvern_stackhandler" style="overflow-y: scroll">
<!-- begin:: header -->
<div class="voolvern_stackpad">
<section id="voolvern_rightasideheader" class="voolvern_header">
<div class="voolvern_group"> content header </div>
</section>
</div>
<!-- end:: header -->
</section>
</aside>
</main>
</body>
</html>
This whole site will be built using flexbox
Meaning I use:
display: flex
flex: 1
flex-direction: column
To get the full height from elements.
I have spent 2 months trying to figure this problem out.
I would greatly appreciate it if we can solve this problem swiftly.
Thank you!
To make the overflow work correctly you need to position the element you want to do the overflow absolutely. I had the same issue and searched a long time to find this solution. Looks like this is a common behavior when using flex layout.
Here is the relevant change:
<div style="flex: 1; border-bottom: .01rem solid lightgray; position: relative;">
<section style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll;">
<div style="height: 40rem">content</div>
</section>
</div>
And the changes=d snippet where you can see it work.
html {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-height: 100%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
}
body {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
#voolvern_main .voolvern_grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.voolvern_gflex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
a {
text-decoration: none;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.voolvern_grid .voolvern_gridflex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#voolvern_main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
#media (min-width: 40rem) {
#voolvern_pcard_section.voolvern_stack_two .voolvern_item {
width: 50%;
}
}
#media (min-width: 56rem) {
#voolvern_pcard_section.voolvern_stack_two .voolvern_item {
width: 32.99999%;
}
}
#voolvern_main>#voolvern_mainaside.voolvern_aside {
-webkit-box-flex: 1;
-ms-flex: 1 1 1rem;
flex: 1 1 1rem;
}
#voolvern_main>#voolvern_rightaside.voolvern_aside {
width: 32%;
}
#voolvern_main>.voolvern_aside>.voolvern_uid {
width: 100%;
}
.voolvern_stackhandler>.voolvern_stackpad {
padding-right: 1.2rem;
padding-left: 1.2rem;
}
.voolvern_group.voolvern_nuid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#voolvern_toolbar>.voolvern_group {
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
#voolvern_toolbar>.voolvern_group.voolvern_nuid>.voolvern_nitem .voolvern_span {
padding-top: .8rem;
padding-bottom: .8rem;
padding-right: 1rem;
padding-left: 1rem;
border-radius: 10%;
}
#voolvern_toolbar>.voolvern_group.voolvern_nuid>.voolvern_nitem .voolvern_span:hover {
background: lightgray;
}
.voolvern_stackpad>.voolvern_header>.voolvern_group {
height: 3.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<!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">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://kit.fontawesome.com/db35900820.js">
</script>
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-font-face.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<title>vvnfinal</title>
<link rel="icon" href="https://cdn.dribbble.com/users/1097/screenshots/168079/newv2.png">
</head>
<body class="voolvern_grid">
<main id="voolvern_main" class="voolvern_gridflex" style="flex: 1rem">
<aside id="voolvern_mainaside" class="voolvern_aside voolvern_gridflex">
<section class="voolvern_uid voolvern_stackhandler" style=" flex-direction: column; display: flex">
<!-- begin:: header -->
<div class="voolvern_stackpad">
<section id="voolvern_mainasideheader" class="voolvern_header">
<div class="voolvern_group voolvern_nuid">
<span>left</span>
<span>left</span>
</div>
</section>
</div>
<!-- end:: header -->
<div style="flex: 1; border-bottom: .01rem solid lightgray; position: relative;">
<section style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll;">
<!-- here is the div that when givin a height of 40rem+ it cuzes the <section> to push down all the contents after it,
I want the <section> to stay put and is scrollable when that happens but I can't seem to figure that out.
-->
<div style="height: 40rem">content</div>
</section>
</div>
<!-- begin:: toolbar -->
<div class="voolvern_stackpad">
<section id="voolvern_toolbar">
<span class="voolvern_group voolvern_nuid">
<!-- begin:: toolbar items -->
<div class="voolvern_nitem">
<a href="/Projects">
<span class="voolvern_span">
<i class="far fa-lightbulb" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Subsidiaries" class="">
<span class="voolvern_span">
<i class="fab fa-hubspot" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Discover" class="">
<span class="voolvern_span">
<i class="fas fa-shopping-bag" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Discover" class="">
<span class="voolvern_span">
<i class="fas fa-globe-americas" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Support" class="">
<span class="voolvern_span">
<i class="fas fa-hands-helping" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Support" class="">
<span class="voolvern_span">
<i class="fab fa-ioxhost" aria-hidden="true">
</i>
</span>
</a>
</div>
<!-- end:: toolbar itemns-->
</span>
</section>
</div>
<!-- end:: toolbar -->
</section>
</aside>
<aside id="voolvern_rightaside" class="voolvern_aside voolvern_nuid">
<section class="voolvern_uid voolvern_stackhandler" style="overflow-y: scroll">
<!-- begin:: header -->
<div class="voolvern_stackpad">
<section id="voolvern_rightasideheader" class="voolvern_header">
<div class="voolvern_group"> content header </div>
</section>
</div>
<!-- end:: header -->
</section>
</aside>
</main>
</body>
</html>
Related
I want my sidemenu to be fixed. But whenever I do it the content page crashes.
It's this class menu_left . When I remove position: fixed then all works fine. But i want it to be fixed. I just want the menu to stay in position so I can scroll down my content only.
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav {
padding: 10px 40px;
background: white;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
#app {
display: flex;
}
.topbar-user {
display: flex;
}
.menu_left {
background: #333c4e;
width: 200px;
height: 100vh;
position: fixed;
}
.menu_left-icon {
padding: 20px;
}
.menu_left-item {
display: flex;
align-items: center;
color: white;
text-decoration: none;
}
.menu_left-item:hover {
background: #293141;
transition: 0.5s;
}
.topbar-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.main__content {
width: 100%;
overflow: scroll;
}
.main__content-container {
padding: 34px 34px;
}
.imgs {
width: 34px;
padding: 20px;
}
.white-card {
background-color: #fff;
width: 100%;
display: flex;
margin-top: 34px;
height: auto;
align-items: center;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
.card1 {
flex: 1;
}
.card2 {
padding: 20px;
}
#media (max-width: 600px) {
.menu_left {
display: none;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<nav>
<div class="topbar-items">
<H1>Logo</H1>
<div class="topbar-user">
<i class="fas fa-bell"></i>
<p>Jan Kowalski</p>
<i class="fas fa-angle-down"></i>
</div>
</div>
</nav>
<div id="app">
<div class="menu_left">
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
</div>
<div class="main__content">
<div class="main__content-container">
<h2>Main Page</h2>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I undesrtand you meant to say the content "collapses" to the left (not crashes).
You could use a pusher placeholder element like so:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav {
padding: 10px 40px;
background: white;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
position: fixed;
width: 100%;
box-sizing: border-box;
}
#app {
display: flex;
padding-top: 47px;
}
.topbar-user {
display: flex;
}
.menu_left {
background: #333c4e;
width: 200px;
height: 100vh;
position: fixed;
}
.menu_left-pusher {
flex: 0 0 200px;
}
.menu_left-icon {
padding: 20px;
}
.menu_left-item {
display: flex;
align-items: center;
color: white;
text-decoration: none;
}
.menu_left-item:hover {
background: #293141;
transition: 0.5s;
}
.topbar-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.main__content {
width: 100%;
}
.main__content-container {
padding: 34px 34px;
}
.imgs {
width: 34px;
padding: 20px;
}
.white-card {
background-color: #fff;
width: 100%;
display: flex;
margin-top: 34px;
height: auto;
align-items: center;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
.card1 {
flex: 1;
}
.card2 {
padding: 20px;
}
#media (max-width: 600px) {
.menu_left {
display: none;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<nav>
<div class="topbar-items">
<H1>Logo</H1>
<div class="topbar-user">
<i class="fas fa-bell"></i>
<p>Jan Kowalski</p>
<i class="fas fa-angle-down"></i>
</div>
</div>
</nav>
<div id="app">
<div class="menu_left-pusher">...</div>
<div class="menu_left">
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
</div>
<div class="main__content">
<div class="main__content-container">
<h2>Main Page</h2>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The navbar position is not changing when I am clicking the checkbox.
I have tried the other solutions from the similar questions but nothing is working.
I do not understand why it is not working.
do I have to do display: block on the navbar?.
I have watched many tutorials but I just cant get it to implement it here.
--index.html--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/style.css">
<title>Presentation Blog Page</title>
</head>
<body>
<div class="sidebar">
<div class="portfolio-info">
<div class="image">
<img src="/img/venu.jpg" alt="">
</div>
<div class="name">
<p>Venu Gopal Reddy</p>
<p>Programming Enthusiast</p>
</div>
</div>
<div>
<label for="check">☰</label>
<input type="checkbox" id="check">
</div>
<div class="navbar">
<div class="nav-items">
HOME
BLOG
CONTACT
</div>
<div class="social-icons">
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</body>
</html>
--style.css--
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;700;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
:root {
--primary-text-color: #35383b; /*(53,56,59)*/
--secondary-text-color: #555a5f; /*(85,90,95)*/
--primary-bg-color: #6f8f8e; /*(111,143,142)*/
--secondary-bg-color: #96b2b1; /*(150,178,177)*/
}
html,
body {
font-family: 'Roboto', sans-serif;
color: var(--primary-text-color);
background-color: #e2e2e2;
font-size: 100%;
}
#media(max-width: 768px) {
.sidebar {
width: 100%;
height: 100px;
background-color: var(--primary-bg-color);
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
text-align: center;
}
/* Portfolio styling */
.sidebar .portfolio-info {
flex-basis: 50%;
height: 100%;
display: inherit;
justify-content: flex-start;
align-items: center;
}
.sidebar .portfolio-info .image {
width: 5rem;
height: 5rem;
margin-right: 1rem;
}
.sidebar .portfolio-info .image img {
width: 100%;
height: 100%;
border: none;
border-radius: 50%;
}
.sidebar .portfolio-info .name p:first-child {
font-size: 1.5rem;
}
.hamburger label{
display: block;
cursor: pointer;
}
/* Menu styling */
.sidebar .navbar {
position: absolute;
top: 0;
right: -1000px;
display: flex;
flex-direction: column;
flex-basis: 50%;
width: 100%;
height: 300px;
justify-content: space-evenly;
align-items: center;
}
#check:checked ~ .sidebar .navbar {
right: 100px;
}
}
what am I doing wrong here?
You were doing a small mistake in selector
#check:checked ~ .sidebar .navbar
here, I have corrected it, by just a small change in your HTML. ~ does not work the way you were using it, Read it here.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;700;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
:root {
--primary-text-color: #35383b; /*(53,56,59)*/
--secondary-text-color: #555a5f; /*(85,90,95)*/
--primary-bg-color: #6f8f8e; /*(111,143,142)*/
--secondary-bg-color: #96b2b1; /*(150,178,177)*/
}
html,
body {
font-family: 'Roboto', sans-serif;
color: var(--primary-text-color);
background-color: #e2e2e2;
font-size: 100%;
}
#media(max-width: 768px) {
.sidebar {
width: 100%;
height: 100px;
background-color: var(--primary-bg-color);
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
text-align: center;
}
/* Portfolio styling */
.sidebar .portfolio-info {
flex-basis: 50%;
height: 100%;
display: inherit;
justify-content: flex-start;
align-items: center;
}
.sidebar .portfolio-info .image {
width: 5rem;
height: 5rem;
margin-right: 1rem;
}
.sidebar .portfolio-info .image img {
width: 100%;
height: 100%;
border: none;
border-radius: 50%;
}
.sidebar .portfolio-info .name p:first-child {
font-size: 1.5rem;
}
.hamburger label{
display: block;
cursor: pointer;
}
/* Menu styling */
.sidebar .navbar {
position: absolute;
top: 0;
right: -1000px;
display: flex;
flex-direction: column;
flex-basis: 50%;
width: 100%;
height: 300px;
justify-content: space-evenly;
align-items: center;
transition: all 1s;
}
#check {display: none;}
#check:checked + .navbar {
right: 100px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/style.css">
<title>Presentation Blog Page</title>
</head>
<body>
<div class="sidebar">
<div class="portfolio-info">
<div class="image">
<img src="/img/venu.jpg" alt="">
</div>
<div class="name">
<p>Venu Gopal Reddy</p>
<p>Programming Enthusiast</p>
</div>
</div>
<label for="check">☰</label>
<input type="checkbox" id="check">
<div class="navbar">
<div class="nav-items">
HOME
BLOG
CONTACT
</div>
<div class="social-icons">
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</body>
</html>
I am beginner and learning css.I have two questions.
I want to display text below icon box but it's coming right side of
each icon. what mistake am i doing?
I am using display flex,alignItem center, justify content in 3
classes(body ,wrapper, item). Looks like i'm repeating code. Can you suggest good practice?
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.item {
width: 80px;
height: 80px;
margin: 2px;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
cursor: pointer;
border-radius: 3px;
}
.item:hover {
background-color: #F0F1F7;
transform: scale(1.3);
}
.icon {
padding: 10px;
border-radius: 50%;
background-color: rgb(105, 204, 211);
color: white;
}
.text{
padding-top:10px;
display: inline-flex;
vertical-align: middle;
}
<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>Document</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="item">
<i class="icon material-icons">directions_bike</i>
<small class="text">Bicycle</small>
</div>
<div class="item">
<i class="icon material-icons">backup</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">email</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">airplanemode_active</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">insert_chart</i>
<small></small>
</div>
</div>
</body>
</html>
I would suggest adding flex-direction: column; to your .item class.
.item {
width: 80px;
height: 80px;
margin: 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
cursor: pointer;
border-radius: 3px;
}
Here's a codepen: https://codepen.io/josh_minkler/pen/wvvZYeM
CSS tricks has a great guide to flexbox here
I want to decrease the space between "pricing", "how it works" and "features", as you can see here
I also know I can do that with margin but I tried a lot of different ways and it just don't come to mind on how to do that, so, it'd great if you could give me a hand.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Product Page</title>
<style type="text/css">
body{
background: #eee;
font-family: 'Lato', sans-serif;
}
#header-img{
float: left;
width:18.5em;
margin:15px 32px 0px 5px;
}
.nav-link{
position: relative;
float:right;
padding: 24px 40px 15px 20px;
}
#hero{
margin-top: 90px;
text-align: center;
}
#header{
overflow: hidden;
}
#email{
max-width: 275px;
width: 100%;
box-sizing: border-box;
padding:5px;
}
#form{
text-align: -webkit-center;
display: flex;
flex-direction: column;
}
.btn{
margin-top:13px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 150px;
width: 100%;
height: 30px;
background-color: #f1c40f;
padding: 0 20px;
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
border: 3px;
border-radius: 2px;
cursor: pointer;
}
.flex{
display:flex;
margin-top: 80px;
}
.icon{
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
color: darkorange;
}
.desc{
display: flex;
flex-direction: column;
justify-content: unset;
height: 125px;
width: 80vw;
padding: 41px 0px 0px 0px;
text-align: start;
}
.eighttwo, p{
padding: 0;
margin: 0;
}
.divisor{
margin-top: -40px;
}
.container{
width:100%;
max-width: 1000px;
}
a{
text-decoration: none;
color: #000;
}
#nav-bar{
display: flex;
background: #eee;
flex-direction: row;
}
#media screen and (max-width: 410px) {
#nav-bar {
display: flex;
flex-direction: column-reverse;
align-items: center;
text-align: center;
margin-top: 30px;
padding: 0 50px;
}
}
</style>
</head>
<body>
<header id="header">
<nav class="navbar fixed-top" id="nav-bar">
<img src="trombones.jpg" id="header-img">
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#features">Features</a>
</nav>
</header>
<div id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
</div>
<form id="form">
<input id="email" type="email" placeholder="Enter your email address" required>
<input id="submit" type="submit" value="Get Started" class="btn">
<div class="container">
<section id="features">
<div class="flex two">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="flex divisor">
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="flex divisor">
<div class="icon">
<i class="fa fa-3x fa-battery-full"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</section>
</div>
<section id="how-it-works">
<iframe width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
</section>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
If you use justify-content: space-between; for your flex container and margin-left: auto; on the first of your links, the links will be moved as far right as their size and padding allows - see below. (BTW: Erase the float: left - it has no effect for flex items)
#nav-bar {
display: flex;
background: #eee;
flex-direction: row;
justify-content: space-between;
}
.nav-link {
padding: 24px 40px 15px 20px;
}
.nav-link:first-of-type {
margin-left: auto;
}
<nav class="navbar fixed-top" id="nav-bar">
<img src="trombones.jpg" id="header-img">
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#features">Features</a>
</nav>
I'm quite new to flexbox. What I can't seem to figure out is how to position a div to the bottom of the flex container. I searched for solutions on stack overflow but nothing works. Clearly I'm doing something wrong.
So the div header-bottom should be positioned at the bottom of the header container. Any help will be much appreciated. Thanks in advance.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css?family=Playball|Raleway: 300,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="header-logo">
<a href="/">
<img class="header-logo-img" src="http://placehold.it/100x100" alt="">
</a>
</div>
<nav class="header-nav-primary" role="navigation">
<ul class="nav-primary-items">
<li class="nav-primary-item">
<a class="nav-primary-link" href="#home">Home</a>
</li>
<li class="nav-primary-item">
<a class="nav-primary-link" href="#menu">Menu</a>
</li>
<li class="nav-primary-item">
<a class="nav-primary-link" href="#over">Over</a>
</li>
<li class="nav-primary-item">
<a class="nav-primary-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
<div class="header-bottom">
<div class="social-media">
<a href="http://www.facebook.be" target="_blank">
<i class="fa fa-facebook fa-lg" aria-hidden="true"></i>
</a>
<a href="http://www.instagram.be" target="_blank">
<i class="fa fa-instagram fa-lg" aria-hidden="true"></i>
</a>
</div>
<div class="address">
<p>Diestsesteenweg ###<br>3010 Kessel-Lo<br>###/## ## ##</p>
</div>
</div>
</header>
<main class="main">
<section id="home"></section>
<section id="menu"></section>
<section id="over"></section>
<section id="contact"></section>
</main>
</div>
</body>
</html>
CSS
body {
min-width: 320px;
background-color: #fff;
font-family: 'Montserrat', sans-serif;
color: #f1ebda;
font-size: 1.5rem;
font-weight: 300;
line-height: 1.8;
}
.wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-width: 100vw;
min-height: 100vh;
}
.header {
padding: 2.75rem;
background-color: #303030;
}
.header-logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 5.625rem;
}
.nav-primary-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
list-style: none;
margin: 0 0 1.250rem 0;
padding: 0;
}
.nav-primary-item {
margin: 0 .4rem;
}
.nav-primary-link {
display: inline-block;
padding: 0 .4rem;
text-transform: uppercase;
letter-spacing: 0.188rem;
font-size: 1.1rem;
}
.header-bottom {
text-align: center;
}
.social-media i {
margin-right: 1.250rem;
}
.address p {
margin: 1.250rem 0 0 0;
}
.main {
overflow: auto;
padding: 4.45rem 2.75rem;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1.05rem;
padding: 0;
color: #111;
font-weight: 700;
line-height: 1.2;
font-family: 'Playball', sans-serif;
}
a {
text-decoration: none;
color: #f1ebda;
}
a:active,
a:hover,
a:focus {
color: #f1ebda;
text-decoration: none;
}
#media (min-width: 840px) {
.wrapper {
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
overflow: hidden;
height: 100vh;
}
.header {
-webkit-box-flex: 0;
-webkit-flex: 0 0 32rem;
-ms-flex: 0 0 32rem;
flex: 0 0 32rem;
padding: 4.45rem 2.75rem;
max-width: 32rem;
}
.header-nav-primary {
margin-bottom: 2.75rem;
}
.nav-primary-items {
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column;
text-align: center;
}
.nav-primary-item {
margin-bottom: 3.125em;
}
.nav-primary-link {
display: block;
padding: .4rem;
}
.main {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 4.45rem;
}
}
Just add:
align-self: flex-end; to the element you want to position on the bottom.
These are great guides to flexbox if you want to learn some other cool tricks:
http://flexbox.io/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use this code below:
.header-bottom{
align-self: flex-end;
text-align: center;
}
See this tutorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/