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/
Related
I'm currently in an online class in web-design, I'm a beginner and I struggle to finish the second "project" which involve rendering a website design in html and css with responsive element without using pre-processors, so we have to go in with only html and hand-coded css.
I've got several problems to solve but maybe solving the first one will help me figuring out the rest.
there is what I have in computer screen-size and then, what I get with smaller screen-sizes.
Here is the expected result in smartphone size :
I've been struggling with the same overlapping problem at two different areas of the project, but, as mentioned before, I'll limit myself to this first example to see if your potential explanations might help me solve the other instance too.
Here is the html, css and media queries used so far but I don't think there is need of it to replicate the problem:
PS: I separate the 'head' from the 'body' for more clarity of read
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booki</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/e943e673fe.js" crossorigin="anonymous"></script>
</head>
PS : I use a copy of normalize.css not mentioned in the above head. Also, links to the css mentioned below have been cut out for clarity purpose.
there is the html 'body':
<body>
<div class="recherche">
<section class="filtres">
<h3>Filtres</h3>
<div class="filtres-serie">
<section class="economique">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-money-bill-wave fa-lg"></i>
</span>
<p class="filtre-p">Économique</p>
</section>
<section class="familial">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-child-reaching fa-lg"></i>
</span>
<p class="filtre-p">Familial</p>
</section>
<section class="romantique">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-heart fa-lg"></i>
</span>
<p class="filtre-p">Romantique</p>
</section>
<section class="animaux">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-dog fa-lg"></i>
</span>
<p class="filtre-p">Animaux autorisés</p>
</section>
</div>
</section>
<section class="recherche-end">
<span >
<i class="fa-solid fa-circle-info fa-xl"></i>
</span>
<p>Plus de 500 logements sont disponibles dans cette ville</p>
</section>
</div>
</body>
Then the style.css related to the above html:
*{
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
margin: 0px;
width: 100%;
height:100%;
}
/* LIENS - MISE EN FORME*/
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {color: #0065FC ;}
a:active {
text-decoration: none;
color: black;
}
i {
display: block
}
.filtres {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 35px;
/*margin-bottom:41px;*/
}
.filtres-serie {
position: relative;
display: flex;
flex-direction: row;
width: 845px;
height:50px;
gap: 25px;
}
.filtre-p {
position: relative;
margin-top: 17px;
margin-bottom: 14px;
}
.filtres-serie section {
position: relative;
display: flex;
flex-direction: row;
/*justify-content: space-evenly;*/
align-items:center;
border: solid 3px #F2F2F2;
border-radius: 29px;
font-weight: bold;
font-size: 18px;
right: 25px;
}
.filtres-serie section:hover {
color:cornflowerblue;
border-color:cornflowerblue;
background-color:#F2F2F2 ;
}
.economique {
width: 193px;
height: 50px;
}
.filtres-icon {
position: relative;
left: -10px;
color: #0065FC;
background-color: #DEEBFF;
border-radius: 29px;
}
.familial {
height: 50px;
width: 151px;
;
}
.romantique {
height: 50px;
width:183px;
}
.animaux {
height: 50px;
width: 242px;
}
.recherche-end {
display: flex;
flex-direction: row;
align-items: center;
width: 500px;
height:41px;
margin-left: 9px;
gap:12px;
margin-bottom:41px;
padding-left: 50px;
}
.recherche-end i {
color: #0065FC;
}
and finally the media queries related to that section:
#media screen and (max-width:737px) {
.filtres {
display: flex;
flex-direction: column;
width: 100%;
}
.filtres-serie {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap:0;
}
.recherche-end {
width: 100%;
}
}
Thank you for reading this long post and for any help you will be able to provide me. I've looked up this kind of overlapping problem but couldn't find any clear way to untie my Gordian knot.
I'm of course at your disposition for any further precision or clarification if needed.
Regards,
Elrad
Below is the result I got after few modifications on both your html and CSS files (No page content was modified though), mainly CSS. As for the HTML file, I just added the link to CSS file then removed the <div class="recherche">...</div> tag which was surrounding all the page content.
As you can see, this is slightly different from your expected result in that the boxes around the links are wider. However The result remains unchanged on wide screens.
.
The modifications I made on the CSS file are quite important, so I can't just list them all.
Here are the final codes, both HTML and CSS.
*{
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
margin: 0px;
width: 100%;
height:100%;
}
/* LIENS - MISE EN FORME*/
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {color: #0065FC ;}
a:active {
text-decoration: none;
color: black;
}
i {
display: block
}
.filtres {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 35px;
}
.filtres-serie {
display: flex;
flex-direction: row;
width: 845px;
height:50px;
gap: 25px;
}
.filtre-p {
margin-top: 17px;
margin-bottom: 14px;
}
.filtres-serie section {
display: flex;
flex-direction: row;
align-items:center;
border: solid 3px #F2F2F2;
border-radius: 29px;
font-weight: bold;
font-size: 18px;
right: 25px;
}
.filtres-serie section:hover {
color:cornflowerblue;
border-color:cornflowerblue;
background-color:#F2F2F2 ;
}
.economique {
width: 193px;
height: 50px;
}
.filtres-icon {
position: relative;
left: -10px;
color: #0065FC;
background-color: #DEEBFF;
border-radius: 29px;
}
.familial {
height: 50px;
width: 151px;
;
}
.romantique {
height: 50px;
width:183px;
}
.animaux {
height: 50px;
width: 242px;
}
.recherche-end {
display: flex;
flex-direction: row;
width: 500px;
height:41px;
margin-left: 9px;
gap:12px;
margin-bottom:41px;
padding-left: 50px;
}
.recherche-end i {
color: #0065FC;
}
#media screen and (max-width:737px) {
body{
margin-left: 30px;
position: relative;
}
.filtres {
display: flex;
flex-direction: column;
width: 100%;
justify-content: space-between;
}
.filtres-serie {
min-width: 425px;
width: 70%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
gap:12px;
}
.recherche-end {
width: 100%;
margin-top: 160px;
padding-left: 0;
gap: 12px;
}
.romantique, .animaux{
display: flex;
flex-direction: row;
width: 80%;
justify-content: flex-start;
padding-right: 70px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booki</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/e943e673fe.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- <div class="recherche"> -->
<section class="filtres">
<h3>Filtres</h3>
<div class="filtres-serie">
<section class="economique">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-money-bill-wave fa-lg"></i>
</span>
<p class="filtre-p">Économique</p>
</section>
<section class="familial">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-child-reaching fa-lg"></i>
</span>
<p class="filtre-p">Familial</p>
</section>
<section class="romantique">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-heart fa-lg"></i>
</span>
<p class="filtre-p">Romantique</p>
</section>
<section class="animaux">
<span class="recherche-icon filtres-icon">
<i class="fa-solid fa-dog fa-lg"></i>
</span>
<p class="filtre-p">Animaux autorisés</p>
</section>
</div>
</section>
<section class="recherche-end">
<span >
<i class="fa-solid fa-circle-info fa-xl"></i>
</span>
<p>Plus de 500 logements sont disponibles dans cette ville</p>
</section>
<!-- </div> -->
</body>
</html>
I'm new to HTML/CSS. I'm trying to space out the items on my nav-link, due to the fact that the "collections" and "spark" seem to be overlapping each other. Is there any way to go about this, and why it is happening? should i accomplish this using Flexbox or grid? I've included the code below.
<!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>My Website</title>
<link rel="stylesheet" href="nav.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Ubuntu:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<div class="navigation-wrapper">
<div class="left-column">
<img src="Logos/codepen-wordmark-display-inside-
white#10x.png" alt="Logo">
</div>
<div class="center-column">
<div class="links-wrapper">
<div class="nav-link">
Pens
</div>
<div class="nav-link">
Projects
</div>
<div class="nav-link">
Posts
</div>
<div class="nav-link">
Collections
</div>
<div class="nav-link">
<div class="icon">
<i class="fas fa-chevron-down"></i>
Spark
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.navigation-wrapper {
color: #cbcbcb ;
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 50px 10px 35px 5px;
background-color: black;
}
.navigation-wrapper > .left-column {
margin-left: 15px;
margin-bottom: 30px;
width: 250px;
}
.navigation-wrapper > .left-column img {
align-items: top;
width: 175px;
padding: 30px 50px 10px 15px;
}
.navigation-wrapper > .center-column {
display: flex;
padding: 50px 30px 10px 10px;
justify-content: space-between;
align-items: center;
}
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
------CSS Here------
.navigation-wrapper {
color: #cbcbcb ;
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 50px 10px 35px 5px;
background-color: black;
}
.navigation-wrapper > .left-column {
margin-left: 15px;
margin-bottom: 30px;
width: 250px;
}
.navigation-wrapper > .left-column img {
align-items: top;
width: 175px;
padding: 30px 50px 10px 15px;
}
.navigation-wrapper > .center-column {
display: flex;
padding: 50px 30px 10px 10px;
justify-content: space-between;
align-items: center;
}
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
.nav-link a {
color:#cbcbcb;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 20px;
font-weight: bold;
transition: 1.0s;
}
The problem lies here :
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
You have given a fixed width to the nav-link class and that's why the content is overlapping. Change the CSS like this:
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 4rem; /* add some gap as well */
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
/* width: 70px; */
text-align: center;
}
.head{
display:flex;
}
.navbar{
display:flex;
}
a{
text-decoration:none;
margin-right:2rem;
}
li{
list-style:none;
}
img{
width:10%;
}
<!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>Document</title>
</head>
<body>
<header class="head">
<div class="logo">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
<nav class="navbar">
<li>Pens</li>
<li>Projects</li>
<li>Posts</li>
<li>Collections</li>
<li>Spark</li>
</nav>
</header>
</body>
</html>
Here is my CODE:
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/********* global styles *******/
img:not(.nav-logo) {
width: 100%;
display: block;
}
/* header */
.header {
display: flex;
/* flex-direction: column; */
}
/* navbar */
.nav-bar {
position: sticky;
}
.nav-wrap {
min-width: 3rem;
max-height: 100vh;
display: flex;
/* flex-wrap: wrap; */
/* flex-direction: row; */
}
.nav-header {
display: flex;
/* flex-direction: column; */
max-width: 3.4rem;
background: transparent;
padding: 1rem 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
/* align-content: center; */
}
.nav-toggle {
margin: auto auto;
/* align-self: center; */
/* justify-self: center; */
background: transparent;
border: none;
/* transform: translateX(-0%); */
/* padding: 1rem; */
outline: none;
color: var(--primaryColor);
font-size: 1.45rem;
cursor: pointer;
transition: var(--mainTransition);
margin-bottom: 10.5rem;
}
.nav-toggle:hover,
.nav-link:hover {
transform: scale(1.2);
}
.nav-links {
margin: auto auto;
height: 22.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-link {
background: transparent;
border: none;
/* transform: translateX(-0%); */
/* padding: 1rem; */
outline: none;
color: var(--primaryColor);
font-size: 1.35rem;
cursor: pointer;
transition: var(--mainTransition);
}
/* hero */
.hero {
width: 100%;
min-height: 100vh;
background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(285, 83%, 60%, 0)),
url(https://dummyimage.com/821x1082/d415d4/fff) center/cover no-repeat fixed;
display: flex;
justify-content: 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" />
<!-- style -->
<!--<link rel="stylesheet" href="fontawesome-free-5.15.3-web/css/all.css" />-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./styles.css" />
<title>Културата Ще Спаси Света</title>
</head>
<body>
<!-- header -->
<header id="home" class="header">
<!-- navbar -->
<nav class="navbar">
<div class="nav-wrap">
<!-- nav header -->
<div class="nav-header">
<button
type="button"
class="nav-toggle"
id="nav-toggle"
aria-label="nav toggler"
>
<i class="fas fa-bars"></i>
</button>
<div class="nav-links">
<i class="fas fa-volleyball-ball nav-link"></i>
<i class="fas fa-paint-brush nav-link"></i>
<i class="fas fa-music nav-link"></i>
<i class="fas fa-pray nav-link"></i>
<i class="fas fa-globe-americas nav-link"></i>
</div>
<!-- nav links -->
</div>
</div>
</nav>
<!-- hero -->
<div class="hero">
</div>
</header>
<section>More content<section>
</body>
</html>
Here is how it looks now
I want the side navbar to stay fixed while I am scrolling down. And to occupy all the height of the right side.
Any help would be great.
Thank you
I am adding this because StackOverflow would not let me post this without more details which I do not think I need.
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/********* global styles *******/
img:not(.nav-logo) {
width: 100%;
display: block;
}
/* header */
.header {
display: flex;
flex-direction: column;
position:fixed;
left:0;
top:0;
}
/* navbar */
.nav-bar {
position: sticky;
}
.nav-wrap {
min-width: 3rem;
max-height: 100vh;
display: flex;
/* flex-wrap: wrap; */
/* flex-direction: row; */
}
.nav-header {
display: flex;
/* flex-direction: column; */
max-width: 3.4rem;
background: transparent;
padding: 1rem 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
/* align-content: center; */
}
.nav-toggle {
margin: auto auto;
/* align-self: center; */
/* justify-self: center; */
background: transparent;
border: none;
/* transform: translateX(-0%); */
/* padding: 1rem; */
outline: none;
color: var(--primaryColor);
font-size: 1.45rem;
cursor: pointer;
transition: var(--mainTransition);
margin-bottom: 10.5rem;
}
.nav-toggle:hover,
.nav-link:hover {
transform: scale(1.2);
}
.nav-links {
margin: auto auto;
height: 22.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-link {
background: transparent;
border: none;
/* transform: translateX(-0%); */
/* padding: 1rem; */
outline: none;
color: var(--primaryColor);
font-size: 1.35rem;
cursor: pointer;
transition: var(--mainTransition);
}
/* hero */
.hero {
width: 100%;
min-height: 100vh;
background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(285, 83%, 60%, 0)),
url("./imgs/hero.jpeg") center/cover no-repeat fixed;
display: flex;
justify-content: 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" />
<!-- style -->
<!--<link rel="stylesheet" href="fontawesome-free-5.15.3-web/css/all.css" />-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./styles.css" />
<title>Културата Ще Спаси Света</title>
</head>
<body>
<!-- header -->
<header id="home" class="header">
<!-- navbar -->
<nav class="navbar">
<div class="nav-wrap">
<!-- nav header -->
<div class="nav-header">
<button
type="button"
class="nav-toggle"
id="nav-toggle"
aria-label="nav toggler"
>
<i class="fas fa-bars"></i>
</button>
<div class="nav-links">
<i class="fas fa-volleyball-ball nav-link"></i>
<i class="fas fa-paint-brush nav-link"></i>
<i class="fas fa-music nav-link"></i>
<i class="fas fa-pray nav-link"></i>
<i class="fas fa-globe-americas nav-link"></i>
</div>
<!-- nav links -->
</div>
</div>
</nav>
<!-- hero -->
<div class="hero">
</div>
</header>
<section>More content<section>
</body>
</html>
Take the navigation out of HEADER, put it right under the BODY tag, use "position: fixed; height: 100%;" with CSS.
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>
I faced the issue with the layout of website being changed by the Google developer tool window which opens when you click F12. So, to be more clear, when I click F12, the window appears but as I move the window upwards the layout gets changed, that is, gallery section reacts to the window and also moves upwards. I do not even know what is causing such problem. I really need your help. Here is the code I have:
<!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">
<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="./external/owl.carousel.min.css">
<link rel="stylesheet" href="./external/owl.theme.default.min.css">
<title>Document</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="col-md-6 intro__welcome-box">
<p class="header__welcome-content">Welcome to our kids School!!</p>
</div>
</div>
</div>
<div class="navbar">
<div class="container">
<div class="row flex-container">
<h1 class="logo-box">
<a href="#">
<img class="logo-box__image" src="./images/logo.png" alt="The logo">
</a>
<span class="logo-box__motto"> Все начинается с детской мечты</span>
</h1>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__link">О Sunnyvale</li>
<li class="navigation__link">Галерея</li>
<li class="navigation__link">Персонал</li>
<li class="navigation__link">Услуги</li>
<li class="navigation__link">Контакты</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<section class="showcase">
<div class="container-fluid p-h-0">
<div class="row">
<div class="col-md-6">
<img src="./primary-original.jpg" alt="">
</div>
<div class="col-md-6">
<div class="showcase-content">
<h2>Join Our Journey</h2>
<p>of World Discovery</p>
Find Out More
</div>
</div>
</div>
</div>
</section>
<section class="gallery">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="content">
<h2>
Добро Пожаловать в галерею Sunnyvale
</h2>
</div>
<div class="content-links m-v-30">
<a class="anchor light-red" href="">Узнать больше</a>
<a class="anchor orange" href="">Смотреть Все</a>
</div>
</div>
<div class="col-md-6">
<div class="carousel-container">
<div class="owl-carousel room-carousel owl-theme">
<img src="./medium-98dcfe.jpg" alt="">
<img src="./primary-original.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="./external/owl.carousel.min.js"></script>
<script>
$('.room-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:1
}
}
})
</script>
</body>
</html>
CSS code
.header {
background: #ecf0f1;
}
.header [class*='intro'] {
padding: 2rem;
}
p {
margin: 0;
}
.intro__welcome-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar {
background: white;
}
.logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.logo-box__motto {
font-size: 16px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
border-left: 1px solid rgba(88, 87, 87, 0.507);
padding: 0 1rem;
color: rgba(88, 87, 87, 0.507);
font-weight: bold;
line-height: 1.5;
}
.logo-box__image {
padding-right: 1rem;
}
.logo-box__motto {
width: 30%;
text-transform: uppercase;
font-size: 1.5rem;
}
.gallery {
padding: 5rem 0;
}
.gallery .content {
width: 40%;
text-align: center;
text-transform: uppercase;
font-size: 2rem;
margin: auto;
}
.gallery .content h2 {
line-height: 1.5;
}
.m-v-30 {
margin: 30px 0;
}
.content-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.anchor {
text-decoration: none;
color: white;
font-weight: 600;
display: inline-block;
padding: 1rem 1.5rem;
border-radius: 30px;
text-transform: uppercase;
}
.anchor:hover {
text-decoration: none;
color: white;
}
.anchor.light-red {
background: rgba(255, 0, 0, 0.658);
margin-left: 7rem;
}
.anchor.orange {
background: orange;
margin-right: 7rem;
}
.carousel-container {
height: 300px;
border-radius: 10px;
overflow-y: hidden;
}
.p-h-0 {
padding: 0;
}
.cloud {
height: 200px;
width: 100%;
background-image: url(/cloud.png);
position: absolute;
bottom: 0;
}
.showcase img {
width: 100%;
height: 100%;
}
.showcase {
height: 70vh;
position: relative;
}
.header__tel-number {
color: #ff7b00;
font-weight: 700;
font-size: 1.5rem;
}
.navigation__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navigation__link a {
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
text-decoration: none;
text-transform: uppercase;
color: rgba(44, 43, 43, 0.603);
font-weight: 600;
-webkit-transition: background .5s, color .5s;
transition: background .5s, color .5s;
}
.navigation__link a:hover {
color: white;
background: #ff7b00;
}
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navigation {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.intro__address-box p {
text-align: right;
}
/*# sourceMappingURL=main.css.map */
This is happening because the .showcase section has the height set to 70vh, which is relative to the viewport-height. When you open the Dev Tools, the height of the window gets smaller, thus 70vh becoming less than with the full screen, thus moving the gallery upwards.
Simply remove height: 70vh; from .showcase to fix the issue.
Code snippet below:
.header {
background: #ecf0f1;
}
.header [class*='intro'] {
padding: 2rem;
}
p {
margin: 0;
}
.intro__welcome-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar {
background: white;
}
.logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.logo-box__motto {
font-size: 16px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
border-left: 1px solid rgba(88, 87, 87, 0.507);
padding: 0 1rem;
color: rgba(88, 87, 87, 0.507);
font-weight: bold;
line-height: 1.5;
}
.logo-box__image {
padding-right: 1rem;
}
.logo-box__motto {
width: 30%;
text-transform: uppercase;
font-size: 1.5rem;
}
.gallery {
padding: 5rem 0;
}
.gallery .content {
width: 40%;
text-align: center;
text-transform: uppercase;
font-size: 2rem;
margin: auto;
}
.gallery .content h2 {
line-height: 1.5;
}
.m-v-30 {
margin: 30px 0;
}
.content-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.anchor {
text-decoration: none;
color: white;
font-weight: 600;
display: inline-block;
padding: 1rem 1.5rem;
border-radius: 30px;
text-transform: uppercase;
}
.anchor:hover {
text-decoration: none;
color: white;
}
.anchor.light-red {
background: rgba(255, 0, 0, 0.658);
margin-left: 7rem;
}
.anchor.orange {
background: orange;
margin-right: 7rem;
}
.carousel-container {
height: 300px;
border-radius: 10px;
overflow-y: hidden;
}
.p-h-0 {
padding: 0;
}
.cloud {
height: 200px;
width: 100%;
background-image: url(/cloud.png);
position: absolute;
bottom: 0;
}
.showcase img {
width: 100%;
height: 100%;
}
.showcase {
/* height: 70vh; */
position: relative;
}
.header__tel-number {
color: #ff7b00;
font-weight: 700;
font-size: 1.5rem;
}
.navigation__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navigation__link a {
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
text-decoration: none;
text-transform: uppercase;
color: rgba(44, 43, 43, 0.603);
font-weight: 600;
-webkit-transition: background .5s, color .5s;
transition: background .5s, color .5s;
}
.navigation__link a:hover {
color: white;
background: #ff7b00;
}
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navigation {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.intro__address-box p {
text-align: right;
}
/*# sourceMappingURL=main.css.map */
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<title>Document</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="col-md-6 intro__welcome-box">
<p class="header__welcome-content">Welcome to our kids School!!</p>
</div>
</div>
</div>
<div class="navbar">
<div class="container">
<div class="row flex-container">
<h1 class="logo-box">
<a href="#">
<img class="logo-box__image" src="./images/logo.png" alt="The logo">
</a>
<span class="logo-box__motto"> Все начинается с детской мечты</span>
</h1>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__link">О Sunnyvale</li>
<li class="navigation__link">Галерея</li>
<li class="navigation__link">Персонал</li>
<li class="navigation__link">Услуги</li>
<li class="navigation__link">Контакты</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<section class="showcase">
<div class="container-fluid p-h-0">
<div class="row">
<div class="col-md-6">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg" alt="">
</div>
<div class="col-md-6">
<div class="showcase-content">
<h2>Join Our Journey</h2>
<p>of World Discovery</p>
Find Out More
</div>
</div>
</div>
</div>
</section>
<section class="gallery">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="content">
<h2>
Добро Пожаловать в галерею Sunnyvale
</h2>
</div>
<div class="content-links m-v-30">
<a class="anchor light-red" href="">Узнать больше</a>
<a class="anchor orange" href="">Смотреть Все</a>
</div>
</div>
<div class="col-md-6">
<div class="carousel-container">
<div class="owl-carousel room-carousel owl-theme">
<img src="https://www.newyorkpass.com/images/rebrand/prices_01.jpg" alt="">
<img src="https://thenypost.files.wordpress.com/2017/04/new-york.jpg?quality=90&strip=all&w=618&h=410&crop=1" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<script>
$('.room-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:1
}
}
})
</script>
</body>
</html>
The Chrome development tool is not an overlay by default, it's width/height is taken off the display screen. Since your design is responsive, it will adapt to the display size (which is browser window minus developer tool).
Solution: in the developer tool's menu, select "Undock into separate window"
Screenshot: https://i.stack.imgur.com/zhWz7.png