I defined an image width as 100%, though, when I change to a 320 px display it doesn't use all the width.
I tried using vw, putting the exact width size of the display. But it never works, it only works if I put a larger width.
My code is in this Github repository, with html and css files: https://github.com/JoeyBeckWheeler/Projeto-Everest
.banner{
width: 100%;
height: 60vh;
background-image: url('../imagens/bg-2.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
}
Snippet:
#import url('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');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
font-family: 'Raleway', sans-serif;
}
body {
background-color: #878A8C;
color: #fff;
}
.banner {
width: 100%;
height: 60vh;
background-image: url('https://github.com/JoeyBeckWheeler/Projeto-Everest/tree/main/Assets/imagens/bg-2.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
}
.slogan {
text-align: center;
margin-top: 15px;
background-color: rgba(0, 0, 0, 0.3);
padding: 15px;
border-bottom: white 2px solid;
}
/* Talvez eu tenha que arrumar no responsivo */
.menu {
display: flex;
justify-content: flex-end;
margin-right: 30px;
}
.menu-list,
a {
display: flex;
list-style-type: none;
text-decoration: none;
color: white;
margin: 15px 15px 0 0;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
/* */
.title {
margin: 15vh;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.infos {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
margin-bottom: 50px;
}
#Plans-section {
margin: 50px 50px 50px 50px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
padding: 1vh;
border: 5px solid rgba(0, 0, 0, 0.7);
}
.card-item {
margin: 15px 15px 15px 15px;
}
.subtitle {
background-color: #3B5159;
padding: 0.5em;
color: white;
text-align: center;
}
#About-Us-section {
margin: 50px 50px 50px 50px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
background-color: #878A8C;
padding: 1vh;
border: 7px solid rgba(0, 0, 0, 0.7);
line-height: 2;
}
.about-title {
text-align: center;
}
footer {
background-color: #283940;
height: 80px;
text-align: center;
line-height: 80px;
}
#media screen and (min-width:320px) and (max-width:375px) {
.menu {
display: flex;
justify-content: flex-end;
margin-right: 35px;
}
#Plans-section {
width: 80vw;
}
.images {
height: 100px;
width: 200px;
}
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Assets/CSS/style.css">
<title>Projeto</title>
</head>
<body>
<header class="banner">
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">Início</li>
<li class="menu-item">Planos</li>
<li class="menu-item">Sobre nós</li>
</ul>
</nav>
<div class="title">
<div class="titulo">
<h1> Corretora Everest </h1>
<p class="slogan"><b><em>Te ajudamos a chegar alto </em></b></p>
</div>
</div>
</header>
<div class="infos">
<main>
<section id="Plans-section">
<div class="card-item">
<img class="images" src="./Assets/imagens/card_01.png" alt="">
<p class="subtitle">Plano Star</p>
</div>
<div class="card-item">
<img class="images" src="./Assets/imagens/card_03.jpg" alt="">
<p class="subtitle">Plano Diamond</p>
</div>
<div class="card-item">
<img class="images" src="./Assets/imagens/card_05.jpg" alt="">
<p class="subtitle"> Plano Magic</p>
</div>
</section>
<section id="About-Us-section">
<article>
<header class="about-title">
<h2>Sobre nós</h2>
</header>
<ul class="info-text">
<li style="margin-left: 15px; ;">
<p>Investimos o seu dinheiro como se fosse <b>nosso</b></p>
</li>
<li style="margin-left:15px;">
<p>Com planos de investimentos personalizados te ajudamos a <b>chegar alto!</b></p>
</li>
<li style="margin-left: 15px; ;">
<p>Nosso time conta apenas com especialistas da área</p>
</li>
</ul>
</article>
</section>
</main>
</div>
<footer>
<p>Copyright © 2022</p>
</footer>
</body>
</html>
You are now banned from margin. Find other ways of spacing elements. Consider using padding and gap instead.
Use outline: 1px solid red on everything to find overflowing elements.
Also, avoid setting harsh width/height, especially with viewport units, try using min-height, max-width, etc.
Sign up for Kevin Powell's Conquering Responsive Layouts course.
I hope this example sets you on the right path, stop using CSS to shoot yourself in the foot.
#import url('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');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
font-family: 'Raleway', sans-serif;
outline: 1px solid red;
}
body {
background-color: #878A8C;
color: #fff;
}
.banner {
width: 100%;
min-height: 60vh;
background-image: url('https://github.com/JoeyBeckWheeler/Projeto-Everest/tree/main/Assets/imagens/bg-2.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
}
.slogan {
text-align: center;
margin-top: 15px;
background-color: rgba(0, 0, 0, 0.3);
padding: 15px;
border-bottom: white 2px solid;
}
/* Talvez eu tenha que arrumar no responsivo */
.menu {
display: flex;
justify-content: flex-end;
}
.menu-list,
a {
display: flex;
list-style-type: none;
text-decoration: none;
color: white;
padding: 15px 15px 0 0;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
/* */
.title {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.infos {
display: flex;
justify-content: center;
align-items: center;
}
#Plans-section {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
padding: 1vh;
border: 5px solid rgba(0, 0, 0, 0.7);
}
.card-item {
margin: 15px 15px 15px 15px;
}
.subtitle {
background-color: #3B5159;
padding: 0.5em;
color: white;
text-align: center;
}
#About-Us-section {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
background-color: #878A8C;
padding: 1vh;
border: 7px solid rgba(0, 0, 0, 0.7);
line-height: 2;
}
.about-title {
text-align: center;
}
footer {
background-color: #283940;
height: 80px;
text-align: center;
line-height: 80px;
}
#media screen and (min-width:320px) and (max-width:375px) {
.menu {
display: flex;
justify-content: flex-end;
margin-right: 35px;
}
#Plans-section {
width: 80vw;
}
.images {
height: 100px;
width: 200px;
}
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Assets/CSS/style.css">
<title>Projeto</title>
</head>
<body>
<header class="banner">
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">Início</li>
<li class="menu-item">Planos</li>
<li class="menu-item">Sobre nós</li>
</ul>
</nav>
<div class="title">
<div class="titulo">
<h1> Corretora Everest </h1>
<p class="slogan"><b><em>Te ajudamos a chegar alto </em></b></p>
</div>
</div>
</header>
<div class="infos">
<main>
<section id="Plans-section">
<div class="card-item">
<img class="images" src="./Assets/imagens/card_01.png" alt="">
<p class="subtitle">Plano Star</p>
</div>
<div class="card-item">
<img class="images" src="./Assets/imagens/card_03.jpg" alt="">
<p class="subtitle">Plano Diamond</p>
</div>
<div class="card-item">
<img class="images" src="./Assets/imagens/card_05.jpg" alt="">
<p class="subtitle"> Plano Magic</p>
</div>
</section>
<section id="About-Us-section">
<article>
<header class="about-title">
<h2>Sobre nós</h2>
</header>
<ul class="info-text">
<li>
<p>Investimos o seu dinheiro como se fosse <b>nosso</b></p>
</li>
<li>
<p>Com planos de investimentos personalizados te ajudamos a <b>chegar alto!</b></p>
</li>
<li>
<p>Nosso time conta apenas com especialistas da área</p>
</li>
</ul>
</article>
</section>
</main>
</div>
<footer>
<p>Copyright © 2022</p>
</footer>
</body>
</html>
Related
I'm coding my first website but unfortunately there is some unwanted empty space at the bottom that won't go away.
I've checked a lot of solves but they don't seem to be working. Could somebody please take a look at the code (linked below) and let me know what I'm doing wrong?
i can see this problem in all my html, usually if my html has content the problem doesn't but it reappears when i resize the screen with "inspect element" tool of any browser. As I said before, I tried a lot of solutions, even deleting whole lines of code to try to find the solution but I don't get anything...
/* General */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-decoration: none;
}
.bodyBg {
background-image: url(../img/bg/bgMain.jpg);
background-position: center;
background-attachment: fixed;
}
/* HEADER*/
.headerMain {
text-align: center;
font-style: italic;
background-color: rgb(30, 3, 68);
font-size: 1.5rem;
overflow: hidden;
position: sticky;
top: 0;
z-index: 100;
}
/* NAV */
.logoNavDiv {
display: flex;
justify-content: center;
margin: -3% auto -4% auto;
}
.logoNavImg {
width: 50%;
height: auto;
}
.navMain {
background-color: rgb(30, 3, 68);
height: auto;
padding-top: 0.5%;
padding-bottom: 0.5%;
}
.navUl {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}
.navLi {
list-style: none;
margin-right: 2%;
}
.navLiMobile {
display: none;
}
.navLink:hover {
color: rgb(185, 13, 13);
font-weight: 600px;
}
.navLink {
color: white;
}
/* FOOTER */
.foot {
background-color: rgb(53, 7, 119);
display: flex;
justify-content: center;
}
.footBox {
padding-top: 0.5%;
display: flex;
flex-direction: column;
}
.footIconBox {
display: flex;
justify-content: center;
list-style: none;
}
.footIconLi {
padding-left: 2%;
}
.footIcons {
width: 50px;
height: auto;
}
.footText {
color: white;
text-align: center;
}
/* Noticias.hmtl */
.mainContainerNoticias {
display: grid;
grid-template-columns: 0.5fr 1fr 0.5fr;
grid-template-rows: repeat(3, auto);
grid-template-areas:
"header header header"
"main main main"
"footer footer footer"
;
}
.headerNoticiasGrid {
grid-area: header;
}
.mainNoticiasGrid {
grid-area: main;
background-image: url(../img/bg/bgSec.jpg);
}
.footerNoticiasGrid {
grid-area: footer;
}
/* TOP Section */
.noticiasTopSection {
margin: 0;
}
.noticiasCatUl {
display: flex;
border: 1px rgba(0, 0, 0, 0.048) solid;
justify-content: center;
margin-bottom: 1%;
}
.noticiasCatLi {
list-style: none;
padding: 2%;
font-size: 1.5rem;
}
.noticiasCatLink {
text-decoration: none;
color: black;
}
.noticiasCatLink:hover {
color: rgb(185, 13, 13);
font-weight: 600px;
border: none;
}
/* MID SECTION */
.noticiasMidSection {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.noticiasArtMain {
display: flex;
max-width: 23em;
height: auto;
border: 1px rgba(0, 0, 0, 0.048) solid;
background-color: rgba(0, 0, 0, 0.11);
border-radius: 8px;
margin: 1%;
overflow: hidden;
}
.noticiasArtImgDiv {
width: 100%;
}
.noticiasArtImg {
width: 100%;
height: 13em;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.noticiasArtDiv {
width: 100%;
height: auto;
overflow: hidden;
color: black;
}
.noticiasArtDiv:hover {
color: red;
}
.noticiasArtH3 {
font-size: 1.4em;
font-weight: 600;
padding-bottom: 0.5rem;
text-align: center;
}
.noticiasArtP {
line-height: 1rem;
font-size: 1rem;
font-weight: 400;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
}
<!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>PCNEWS-Guias/Trucos</title>
<link rel="shortcut icon" href="img/icons/icono.png" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="bodyBg">
<div class="mainContainerNoticias bg22">
<!-- HEADER -->
<header class="headerMain headerNoticiasGrid">
<div class="logoNavDiv">
<a href="index.html">
<img src="img/icons/logo.svg" alt="logotipo" class="logoNavImg">
</a>
</div>
<nav class="navMain">
<ul class="navUl">
<li class="navLi navLiMobile"><a class="navLink" href="index.html">Inicio</a></li>
<li class="navLi"><a class="navLink" href="noticias.html">Noticias</a></li>
<li class="navLi"><a class="navLink" href="reviews.html">Reviews</a></li>
<li class="navLi"><a class="navLink" href="guias.html">Guias</a></li>
<li class="navLi"><a class="navLink" href="contacto.html">Contacto</a></li>
</ul>
</nav>
</header>
<!-- MAIN -->
<main class="mainNoticiasGrid">
<section class="NoticiasTopSection">
<ul class="noticiasCatUl">
<li class="noticiasCatLi">TODO</li>
<li class="noticiasCatLi">NOTICIAS</li>
<li class="noticiasCatLi">ARTICULOS</li>
</section>
<section class="noticiasMidSection">
<article class="noticiasArtMain">
<a href="">
<div class="noticiasArtImgDiv">
<img src="img/noticias/new1.jpg" alt="GTX-3090-TI" class="noticiasArtImg">
</div>
<div class="noticiasArtDiv">
<h3 class="noticiasArtH3">Mineros están rematando sus tarjetas gráficas, pero muchas
tienen
chips
</h3>
<p class="noticiasArtP">Usuarios que compraron algunas de estas tarjetas descubrieron que las tarjetas fueron
modificadas en algún momento</p>
</div>
</a>
</article>
<article class="noticiasArtMain">
<a href="">
<div class="noticiasArtImgDiv">
<img src="img/noticias/new2.jpg" alt="Fall Guys" class="noticiasArtImg">
</div>
<div class="noticiasArtDiv">
<h3 class="noticiasArtH3">Tras el cambio a free-to-play, Fall Guys vive su mejor momento desde 2020
</h3>
<p class="noticiasArtP">El videojuego gratuito de Mediatonic la rompe en Twitch y Steam a pesar de desaparecer de la misma</p>
</div>
</a>
</article>
<article class="noticiasArtMain">
<a href="">
<div class="noticiasArtImgDiv">
<img src="img/noticias/new3.jpg" alt="GoreMagala" class="noticiasArtImg">
</div>
<div class="noticiasArtDiv">
<h3 class="noticiasArtH3">Publican nuevo trailer de Monster Hunter Rise con Astalos y Gore Magala
</h3>
<p class="noticiasArtP">Es momento de que conozcas cómo te harán sufrir estos iconicos enemigos de antiguas entregas</p>
</div>
</a>
</article>
</main>
<!-- Footer -->
<footer class="foot footerNoticiasGrid">
<div class="footBox">
<ul class="footIconBox">
<li class="footIconLi"> <a href="https://www.instagram.com/lucasdxvid/" target="_blank">
<img src="img/icons/instagram.svg" alt="instagram" class="footIcons"> </a>
</li>
<li class="footIconLi"> <a href="https://www.reddit.com/user/Athloner44" target="_blank">
<img src="img/icons/reddit.svg" alt="reddit" class="footIcons"> </a>
</li>
<li class="footIconLi"> <a href="https://www.youtube.com/channel/UCy_yWEbpB7axwSH3Qlthcnw"
target="_blank">
<img src="img/icons/youtube.svg" alt="youtube" class="footIcons"> </a>
</li>
</ul>
<div>
<p class="footText">www.PCNEWS.com y el logotipo son marcas registradas. Derechos Reservados ©
ATHL.COM
S de R.L. de C.V. </p>
</div>
</div>
</footer>
</div>
</body>
</html>
I can help! The problem is the height of your body, which can be solved with the following CSS:
body {
min-height: 100%;
}
Then to give the appearance of no empty space, you can position your footer element all the way at the base of the page, like so:
footer {
position: fixed;
bottom: 0;
width: 100%;
}
For a few days I am trying to eliminate the horizontal scroll on the website, but I am unable to do so. Here is the codepen for it: https://codepen.io/170mayank/pen/gOXExag
This is a simple website code made of basic HTML & CSS and only has two sections. I am making it mobile-first, but the problem is in all screen sizes. Sorry for the bad code, I am a total beginner to web dev. I also haven't uploaded the images, as they don't matter.
I have tried my best to solve the issue but was unsuccessful at it :(. Your help would be highly appreciated.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
line-height: 1.25;
}
body{
font-family: gimlet-text, serif;
font-size: 16px;
font-weight: 400;
color: #344559;
min-height: 100vh;
width: 100vw;
}
/* Hero Section */
.sec1{
background-color: #F7F6F4;
}
.sec1__wrap{
display: flex;
flex-direction: column;
margin: 0 15px;
padding: 50px 0;
}
.sec1__wrap__img{
height: 250px;
width: 100%;
object-fit: cover;
object-position: center;
}
.sec1__wrap__h1{
font-size: 48.83px;
font-family: balboa, sans-serif;
font-weight: 600;
margin: 25px 0 15px 0;
}
.sec1__wrap__p{
margin-bottom: 20px;
}
.sec1__wrap__wrap{
display: flex;
gap: 20px;
align-items: center;
}
.sec1__wrap__wrap__btn1{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #F9826A;
padding: 10px 20px;
}
.sec1__wrap__wrap__btn1__text{
font-size: 12.8px;
color: #F7F6F4;
font-weight: 500;
}
/* .sec1__wrap__wrap__btn1__img{
} */
.sec1__wrap__wrap__btn2{
font-size: 12.8px;
color: #F9826A;
text-decoration: underline;
font-weight: 500;
}
/* Section Separator */
.separator{
width: 100vw;
height: 1px;
background-color: #D5D5D5;
}
/* Website Section 2: Services */
.sec2{
background-color: #F7F6F4;
}
.sec2__wrap{
display: flex;
flex-direction: column;
padding: 40px 15px;
}
.sec2__wrap__box-wrap{
background-color: #fff;
border-radius: 20px 20px 0 20px;
overflow: hidden;
/* display: flex;
flex-direction: column; */
}
.sec2__wrap__box-wrap__img{
height: 200px;
width: 100%;
object-fit: cover;
object-position: center;
}
.sec2__wrap__box-wrap__h3{
font-size: 31.25px;
font-family: balboa, sans-serif;
font-weight: 600;
margin: 20px 0 10px 0;
}
.sec2__wrap__box-wrap__dash{
width: 100px;
height: 3px;
background-color: #F9826A;
margin-bottom: 15px;
}
.sec2__wrap__box-wrap__p{
margin-bottom: 30px;
}
.sec2__wrap__box-wrap__btn-wrap{
background-color: #F9826A;
gap: 10px;
}
.sec2__wrap__box-wrap__btn-wrap__p{
color: #fff;
font-weight: 500;
}
<!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>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/btg4pzb.css">
</head>
<body>
<section class="sec1">
<div class="sec1__wrap">
<img src="/Images/1. Home/hero.jpg" class="sec1__wrap__img">
<h1 class="sec1__wrap__h1">The Best Freight Solution Company</h1>
<p class="sec1__wrap__p">We provide the most specialized and helpful experience by removing hassle associated with your transportation needs.</p>
<div class="sec1__wrap__wrap">
<a href="#"><div class="sec1__wrap__wrap__btn1">
<p class="sec1__wrap__wrap__btn1__text">Contact Us Today!</p>
<img src="/Images/1. Home/hero mail.svg" class="sec1__wrap__wrap__btn1__img">
</div></a>
<div class="sec1__wrap__wrap__btn2">Apply for job</div>
</div>
</div>
</section>
<div class="separator"></div>
<section class="sec2">
<div class="sec2__wrap">
<div class="sec2__wrap__box-wrap box1">
<img class="sec2__wrap__box-wrap__img" src="/Images/1. Home/image1.jpg">
<h3 class="sec2__wrap__box-wrap__h3">Freight Transportation</h3>
<div class="sec2__wrap__box-wrap__dash"></div>
<p class="sec2__wrap__box-wrap__p">Our company specializes in delivery across multi road transportation platform while providing most competitive rates in the industry.</p>
<div class="sec2__wrap__box-wrap__btn-wrap">
<a href="#">
<p class="sec2__wrap__box-wrap__btn-wrap__p">Request a Quote</p>
</a>
<a href="#">
<img class="sec2__wrap__box-wrap__btn-wrap__img" src="/Images/1. Home/arrow1.svg">
</a>
</div>
</div>
</div>
</section>
</body>
</html>
You can use overflow css property.
Give.
overflow:'hidden'
In you css file on body it will eliminate scroll
You can read documentation of mozilla
EDIT.overflow-x: hidden; its work fore me
EDIT2
.separator {
width: 100%;
height: 1px;
background-color: #D5D5D5;
}
instead of width 100vw here give 100%
So, the problem is that you use width: 100vw; for body and .seperator class. Just change them as width: 100%;.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
line-height: 1.25;
}
body{
font-family: gimlet-text, serif;
font-size: 16px;
font-weight: 400;
color: #344559;
min-height: 100vh;
width: 100%;
}
/* Hero Section */
.sec1{
background-color: #F7F6F4;
}
.sec1__wrap{
display: flex;
flex-direction: column;
margin: 0 15px;
padding: 50px 0;
}
.sec1__wrap__img{
height: 250px;
width: 100%;
object-fit: cover;
object-position: center;
}
.sec1__wrap__h1{
font-size: 48.83px;
font-family: balboa, sans-serif;
font-weight: 600;
margin: 25px 0 15px 0;
}
.sec1__wrap__p{
margin-bottom: 20px;
}
.sec1__wrap__wrap{
display: flex;
gap: 20px;
align-items: center;
}
.sec1__wrap__wrap__btn1{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #F9826A;
padding: 10px 20px;
}
.sec1__wrap__wrap__btn1__text{
font-size: 12.8px;
color: #F7F6F4;
font-weight: 500;
}
/* .sec1__wrap__wrap__btn1__img{
} */
.sec1__wrap__wrap__btn2{
font-size: 12.8px;
color: #F9826A;
text-decoration: underline;
font-weight: 500;
}
/* Section Separator */
.separator{
width: 100%;
height: 1px;
background-color: #D5D5D5;
}
/* Website Section 2: Services */
.sec2{
background-color: #F7F6F4;
}
.sec2__wrap{
display: flex;
flex-direction: column;
padding: 40px 15px;
}
.sec2__wrap__box-wrap{
background-color: #fff;
border-radius: 20px 20px 0 20px;
overflow: hidden;
/* display: flex;
flex-direction: column; */
}
.sec2__wrap__box-wrap__img{
height: 200px;
width: 100%;
object-fit: cover;
object-position: center;
}
.sec2__wrap__box-wrap__h3{
font-size: 31.25px;
font-family: balboa, sans-serif;
font-weight: 600;
margin: 20px 0 10px 0;
}
.sec2__wrap__box-wrap__dash{
width: 100px;
height: 3px;
background-color: #F9826A;
margin-bottom: 15px;
}
.sec2__wrap__box-wrap__p{
margin-bottom: 30px;
}
.sec2__wrap__box-wrap__btn-wrap{
background-color: #F9826A;
gap: 10px;
}
.sec2__wrap__box-wrap__btn-wrap__p{
color: #fff;
font-weight: 500;
}
<!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>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/btg4pzb.css">
</head>
<body>
<section class="sec1">
<div class="sec1__wrap">
<img src="/Images/1. Home/hero.jpg" class="sec1__wrap__img">
<h1 class="sec1__wrap__h1">The Best Freight Solution Company</h1>
<p class="sec1__wrap__p">We provide the most specialized and helpful experience by removing hassle associated with your transportation needs.</p>
<div class="sec1__wrap__wrap">
<a href="#"><div class="sec1__wrap__wrap__btn1">
<p class="sec1__wrap__wrap__btn1__text">Contact Us Today!</p>
<img src="/Images/1. Home/hero mail.svg" class="sec1__wrap__wrap__btn1__img">
</div></a>
<div class="sec1__wrap__wrap__btn2">Apply for job</div>
</div>
</div>
</section>
<div class="separator"></div>
<section class="sec2">
<div class="sec2__wrap">
<div class="sec2__wrap__box-wrap box1">
<img class="sec2__wrap__box-wrap__img" src="/Images/1. Home/image1.jpg">
<h3 class="sec2__wrap__box-wrap__h3">Freight Transportation</h3>
<div class="sec2__wrap__box-wrap__dash"></div>
<p class="sec2__wrap__box-wrap__p">Our company specializes in delivery across multi road transportation platform while providing most competitive rates in the industry.</p>
<div class="sec2__wrap__box-wrap__btn-wrap">
<a href="#">
<p class="sec2__wrap__box-wrap__btn-wrap__p">Request a Quote</p>
</a>
<a href="#">
<img class="sec2__wrap__box-wrap__btn-wrap__img" src="/Images/1. Home/arrow1.svg">
</a>
</div>
</div>
</div>
</section>
</body>
</html>
How can I set the height of intro section to 100%? The height of the main is set to 100 viewport height (8rem is the height of header and 7.2rem is for the footer) but the intro section does not cover the height of the main. I've also tried to set the height of intro section to 100% but it didn't work.
'use strict';
const year = document.querySelector('.footer__year');
year.textContent = new Date().getFullYear();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
a {
text-decoration: none;
}
.main {
width: 100%;
min-height: calc(100vh - 8rem - 7.2rem);
}
.heading__primary {
font-size: 5.2rem;
font-weight: 700;
line-height: 1.2;
color: #fff;
position: relative;
}
.header {
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
height: 8rem;
padding: 0 5.6rem;
position: relative;
top: 0;
width: 100%;
z-index: 10;
}
.header__nav {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
width: 100%;
z-index: 11;
}
.header__logo span {
color: #000;
font-size: 2rem;
font-weight: 600;
}
.header__menu {
align-items: stretch;
}
.header__menu-list {
list-style: none;
display: flex;
align-items: center;
gap: 3.2rem;
}
.header__menu-item {
position: relative;
}
.header__menu-btn {
display: flex;
align-items: center;
cursor: pointer;
background-color: transparent;
border: none;
outline: none;
font-family: inherit;
font-weight: inherit;
}
.header__menu-icon {
width: 2.4rem;
height: 2.4rem;
fill: royalblue;
}
.header__menu-icon:not(:last-child) {
margin-right: 0.8rem;
}
.header__menu-name {
font-size: 1.4rem;
font-weight: 500;
color: var(--color-grey-light);
text-transform: uppercase;
transition: var(--transition);
letter-spacing: 0.03rem;
}
.header__menu-name:hover {
color: royalblue;
}
.intro {
height: 100%;
background-image: linear-gradient(rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6)), url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
background-size: cover;
background-position: center;
}
.intro__content {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.intro__text {
max-width: 60rem;
font-size: 1.8rem;
color: #fff;
line-height: 1.8;
}
.intro__btn-search {
cursor: pointer;
width: 55%;
padding: 1.2rem;
display: flex;
align-items: center;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 0.5rem;
}
.intro__btn-icon {
width: 2.4rem;
height: 2.4rem;
fill: #fff;
transition: all 300ms ease-in-out;
}
.footer {
background-color: #f9f7f6;
padding: 3.6rem 0;
width: 100%;
height: 5rem;
}
.footer __description {
font-size: 1.4rem;
}
.t-center {
text-align: 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" />
<title>TRY</title>
</head>
<body>
<header class="header">
<nav class="header__nav">
<div class="header__logo">
<span>Random</span>
</div>
<div class="header__menu">
<ul class="header__menu-list">
<li class="header__menu-item">
<button class="header__menu-btn btn__search">
<span class="header__menu-name">Search</span>
</button>
</li>
<li class="header__menu-item">
<button class="header__menu-btn header__menu-add">
<span class="header__menu-name">Add Recipe</span>
</button>
</li>
<li class="header__menu-item">
<button class="header__menu-btn header__menu-bookmark">
<span class="header__menu-name">Bookmarks</span>
</button>
</li>
<li class="header__menu-item">
</li>
</ul>
</div>
</nav>
</header>
<main class="main">
<section class="intro">
<div class="intro__content container">
<h1 class="heading__primary u-mb-xs t-center">Lorem ipsum dolor?</h1>
<p class="intro__text t-center u-mb-lg">
Discover recipes, cooks and how-to's based on the food you
love.
</p>
<button class="intro__btn-search btn__search">
Search
</button>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p class="footer__description t-center">
© <span class="footer__year"></span> Try — Built by:
DevJan
</p>
</div>
</footer>
</body>
</html>
Change min-height: calc(100vh - 8rem - 7.2rem) to height: calc(100vh - 8rem - 7.2rem)
There are also a couple other options like adding min-height: inherit to your .intro class or adding something like height: 0.001px to your .main class.
Taken from here: Child inside parent with min-height: 100% not inheriting height
min-height
If the content is smaller than the minimum height, the minimum height
will be applied.
If the content is larger than the minimum height, the min-height
property has no effect.
Aside from your min-height you should add a height to your main class. Also it would be better in your example's case to have a static min-height as it would prevent it from ruining your layout as using vh would always follow viewport's height no matter how short/small it is.
'use strict';
const year = document.querySelector('.footer__year');
year.textContent = new Date().getFullYear();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
a {
text-decoration: none;
}
.main {
width: 100%;
min-height: 600px;
height: calc(100vh - 8rem - 7.2rem);
}
.heading__primary {
font-size: 5.2rem;
font-weight: 700;
line-height: 1.2;
color: #fff;
position: relative;
}
.header {
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
height: 8rem;
padding: 0 5.6rem;
position: relative;
top: 0;
width: 100%;
z-index: 10;
}
.header__nav {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
width: 100%;
z-index: 11;
}
.header__logo span {
color: #000;
font-size: 2rem;
font-weight: 600;
}
.header__menu {
align-items: stretch;
}
.header__menu-list {
list-style: none;
display: flex;
align-items: center;
gap: 3.2rem;
}
.header__menu-item {
position: relative;
}
.header__menu-btn {
display: flex;
align-items: center;
cursor: pointer;
background-color: transparent;
border: none;
outline: none;
font-family: inherit;
font-weight: inherit;
}
.header__menu-icon {
width: 2.4rem;
height: 2.4rem;
fill: royalblue;
}
.header__menu-icon:not(:last-child) {
margin-right: 0.8rem;
}
.header__menu-name {
font-size: 1.4rem;
font-weight: 500;
color: var(--color-grey-light);
text-transform: uppercase;
transition: var(--transition);
letter-spacing: 0.03rem;
}
.header__menu-name:hover {
color: royalblue;
}
.intro {
height: 100%;
background-image: linear-gradient(rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6)), url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
background-size: cover;
background-position: center;
}
.intro__content {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.intro__text {
max-width: 60rem;
font-size: 1.8rem;
color: #fff;
line-height: 1.8;
}
.intro__btn-search {
cursor: pointer;
width: 55%;
padding: 1.2rem;
display: flex;
align-items: center;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 0.5rem;
}
.intro__btn-icon {
width: 2.4rem;
height: 2.4rem;
fill: #fff;
transition: all 300ms ease-in-out;
}
.footer {
background-color: #f9f7f6;
padding: 3.6rem 0;
width: 100%;
height: 5rem;
}
.footer __description {
font-size: 1.4rem;
}
.t-center {
text-align: 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" />
<title>TRY</title>
</head>
<body>
<header class="header">
<nav class="header__nav">
<div class="header__logo">
<span>Random</span>
</div>
<div class="header__menu">
<ul class="header__menu-list">
<li class="header__menu-item">
<button class="header__menu-btn btn__search">
<span class="header__menu-name">Search</span>
</button>
</li>
<li class="header__menu-item">
<button class="header__menu-btn header__menu-add">
<span class="header__menu-name">Add Recipe</span>
</button>
</li>
<li class="header__menu-item">
<button class="header__menu-btn header__menu-bookmark">
<span class="header__menu-name">Bookmarks</span>
</button>
</li>
<li class="header__menu-item">
</li>
</ul>
</div>
</nav>
</header>
<main class="main">
<section class="intro">
<div class="intro__content container">
<h1 class="heading__primary u-mb-xs t-center">Lorem ipsum dolor?</h1>
<p class="intro__text t-center u-mb-lg">
Discover recipes, cooks and how-to's based on the food you
love.
</p>
<button class="intro__btn-search btn__search">
Search
</button>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p class="footer__description t-center">
© <span class="footer__year"></span> Try — Built by:
DevJan
</p>
</div>
</footer>
</body>
</html>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I want to know why the video and the second container don't center in the middle of the page when I gave it the justify-content as you see in the third and fourth container the boxes align in the middle.
I tried everything, from margin to float to grid, but it's not working.
Again sorry for the question but I'm a beginner in this game.
/* body and root stuff */
body {
margin: 0;
font-size: 0.813rem;
font-family: "Assistant", sans-serif;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: white;
}
img {
width: 20%;
}
header {
text-align: center;
background: rgb(255, 123, 0);
color: white;
padding: 2em auto;
}
/* body and root stuff end */
/* header stuff */
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: center;
}
.logo-container {
width: 50%;
height: 50%;
margin-right: 8em;
align-self: center;
}
#header-img {
width: 50%;
margin-top: 0.75em;
margin-bottom: 0;
}
nav,
ul {
list-style-type: none;
font-size: 0.75rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.current-page {
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: white;
font-weight: 600;
}
a:hover {
color: orange;
border-bottom: none;
}
#media (min-width: 675px) {
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo-container {
width: 15%;
height: 15%;
align-self: center;
}
#header-img {
width: 100%;
margin-top: 0.75em;
margin-bottom: 0;
padding-bottom: 0.4em;
}
nav,
ul {
list-style-type: none;
font-size: 1rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}
li {
color: white;
margin-left: 2em;
align-self: center;
}
.current-page {
border-bottom: 1px solid white;
}
a {
text-decoration: none;
color: white;
font-weight: 650;
}
a:hover {
color: orange;
border-bottom: none;
}
}
/* header stuff ends */ /* main stuff */
main {
text-align: center;
background: white;
padding: 2em auto;
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.video-container {
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
}
#video {
align-self: center;
}
hr {
margin: 2rem 10%;
background: rgb(255, 123, 0);
}
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 1em;
}
.h2-product-title {
margin-bottom: 1em;
}
.p-product-title {
margin-top: 0;
margin-bottom: 1em;
}
#media (max-width: 900px) {
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
margin-left: 2em;
margin-right: 2em;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.products {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.bindings-picture {
width: 20em;
margin-left: 2em;
margin-right: 2em;
}
<!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="/style.css" />
<link rel="icon" href="img/Union-U-Orange.png" />
<link
href="https://fonts.googleapis.com/css2?family=Assistant:wght#200;300;400;600;700;800&display=swap"
rel="stylesheet"
/>
<title>UNION BINDINGS CO.</title>
</head>
<body>
<header id="header" class="stick-header">
<div class="main-container main-container-flex">
<div class="logo-container">
<img
id="header-img"
src="/img/b89780745f1e81adc10408d92c7c6dda.jpg"
alt="union logo"
/>
</div>
<nav id="nav-bar">
<ul>
<li class="nav-link">
Home
</li>
<li class="nav-link">Product</li>
<li class="nav-link">Support</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="video-container">
<iframe
id="video"
width="560"
height="315"
src="https://www.youtube.com/embed/CQtZRHnbPks"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<hr />
<div class="products-title">
<h2 class="h2-product-title">OUR BINDINGS</h2>
<p class="p-product-title">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
doloremque dicta repellendus, iste unde voluptas.
</p>
</div>
<div class="products">
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
</div>
<hr />
<div class="more-products-container">
<div class="products"></div>
<div class="products"></div>
<div class="products"></div>
</div>
<hr />
<div class="newsletter">
<form action=" https://www.freecodecamp.com/email-submit)" id="form">
<h3>SUBSCRIBE TO OUR NEWSLETTER</h3>
<input type="name" name="name" id="name" placeholder="name" />
<input
class="email-holder"
type="email"
id="email"
placeholder="email"
/>
<input id="submit" type="submit" value="SUBSCRIBE" />
</form>
</div>
</main>
<footer></footer>
</body>
</html>
In your CSS for the main identifier, you have flex-direction: column; so you need align-items: center;, not justify-content: center;. Also, I love this resource on Flexbox.
align-items is used for the "cross axis" (if you're adding elements in the column flex direction, the cross axis is the horizontal, and you want your stuff centered horizontally; justify-contents follows the direction axis so it would be trying to center things vertically).
Here's the updated chunk of code in question:
/* ... other styles were above ... */
main {
text-align: center;
background: white;
padding: 2em auto;
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
justify-content: center; /* don't need this */
align-items: center;
}
/* ... there's more stuff below ... */
Your flex direction is column - so you need to use align-items: center instead.
justify-content: center centers elements in the direction of the flex-flow. align-items aligns flex children on the cross axis of the direction (in this case column).
If your flex-direction was row - align-items: center would vertically center the flex children, since it's the cross axis of the main flex direction.
/* body and root stuff */
body {
margin: 0;
font-size: 0.813rem;
font-family: "Assistant", sans-serif;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: white;
}
img {
width: 20%;
}
header {
text-align: center;
background: rgb(255, 123, 0);
color: white;
padding: 2em auto;
}
/* body and root stuff end */
/* header stuff */
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: center;
}
.logo-container {
width: 50%;
height: 50%;
margin-right: 8em;
align-self: center;
}
#header-img {
width: 50%;
margin-top: 0.75em;
margin-bottom: 0;
}
nav,
ul {
list-style-type: none;
font-size: 0.75rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.current-page {
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: white;
font-weight: 600;
}
a:hover {
color: orange;
border-bottom: none;
}
#media (min-width: 675px) {
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo-container {
width: 15%;
height: 15%;
align-self: center;
}
#header-img {
width: 100%;
margin-top: 0.75em;
margin-bottom: 0;
padding-bottom: 0.4em;
}
nav,
ul {
list-style-type: none;
font-size: 1rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}
li {
color: white;
margin-left: 2em;
align-self: center;
}
.current-page {
border-bottom: 1px solid white;
}
a {
text-decoration: none;
color: white;
font-weight: 650;
}
a:hover {
color: orange;
border-bottom: none;
}
}
/* header stuff ends */ /* main stuff */
main {
text-align: center;
background: white;
padding: 2em auto;
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
}
.video-container {
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
}
#video {
align-self: center;
}
hr {
margin: 2rem 10%;
background: rgb(255, 123, 0);
}
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 1em;
}
.h2-product-title {
margin-bottom: 1em;
}
.p-product-title {
margin-top: 0;
margin-bottom: 1em;
}
#media (max-width: 900px) {
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
margin-left: 2em;
margin-right: 2em;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.products {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.bindings-picture {
width: 20em;
margin-left: 2em;
margin-right: 2em;
}
<!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="/style.css" />
<link rel="icon" href="img/Union-U-Orange.png" />
<link
href="https://fonts.googleapis.com/css2?family=Assistant:wght#200;300;400;600;700;800&display=swap"
rel="stylesheet"
/>
<title>UNION BINDINGS CO.</title>
</head>
<body>
<header id="header" class="stick-header">
<div class="main-container main-container-flex">
<div class="logo-container">
<img
id="header-img"
src="/img/b89780745f1e81adc10408d92c7c6dda.jpg"
alt="union logo"
/>
</div>
<nav id="nav-bar">
<ul>
<li class="nav-link">
Home
</li>
<li class="nav-link">Product</li>
<li class="nav-link">Support</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="video-container">
<iframe
id="video"
width="560"
height="315"
src="https://www.youtube.com/embed/CQtZRHnbPks"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<hr />
<div class="products-title">
<h2 class="h2-product-title">OUR BINDINGS</h2>
<p class="p-product-title">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
doloremque dicta repellendus, iste unde voluptas.
</p>
</div>
<div class="products">
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
</div>
<hr />
<div class="more-products-container">
<div class="products"></div>
<div class="products"></div>
<div class="products"></div>
</div>
<hr />
<div class="newsletter">
<form action=" https://www.freecodecamp.com/email-submit)" id="form">
<h3>SUBSCRIBE TO OUR NEWSLETTER</h3>
<input type="name" name="name" id="name" placeholder="name" />
<input
class="email-holder"
type="email"
id="email"
placeholder="email"
/>
<input id="submit" type="submit" value="SUBSCRIBE" />
</form>
</div>
</main>
<footer></footer>
</body>
</html>
justify-content:center is working. It's just centering it to the width of the container that's set to 900px
.video-container {
//this width
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
}
Change width to 100% and it will work fine
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