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
Related
This question already has answers here:
border-radius not working
(13 answers)
Closed 5 months ago.
When I try to add a border radius to the container div it won't apply the border radius to the bottom, only to the top. Why is that? Why does it add only border-radius to the community div and not the price-benefits div? Can somebody please tell me why can't I add border-radius to the whole container
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/style.css" />
<title>My Project</title>
</head>
<body>
<div class="container">
<div class="community">
<h3>Join our community</h3>
<h4>30-day, hassle-free money back guarantee</h4>
<p>Gain access to our full library of tutorials along with expert code reviews.
Perfect for any developers who are serious about honing their skills.</p>
</div>
<div class="price-benefits">
<div class="price col">
<h4>Monthy Subscription</h4>
<div class="price-dollars"><h3>$29</h3><p>per month</p></div>
<p>Full access for less than $1 a day</p>
<button>Sign up</button>
</div>
<div class="benefits col">
<h4>Why Us</h4>
<ul>
<li>Tutorials by industry experts</li>
<li>Peer & expert code review</li>
<li>Coding exercises</li>
<li>Access to our GitHub repos</li>
<li>Community forum</li>
<li>Flashcard decks</li>
<li>New videos every week</li>
</ul>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/b386b46c97.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
SASS
#use '../1-helpers-colors/mixins' as *;
#use '../1-helpers-colors/variables' as *;
body{
background-color: #E6EFF6;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 75rem;
max-width: 100%;
background-color: white;
border-radius: 2rem ;
.community{
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
h3{
color: #45ADAC;
}
h4{
color: #BFDF32;
}
p{
max-width: 60rem;
color: #A8ACB5;
}
}
.price-benefits{
display: flex;
}
.price{
background-color: #2BB3B1;
display: flex;
flex-direction: column;
gap: 2rem;
h4{
color: white;
}
p{
color: white;
}
}
.price-dollars{
display: flex;
gap: 2rem;
align-items: center;
h3{
color: white;
}
p{
color: white;
opacity: 0.5;
}
}
.benefits{
background-color: #4ABEBD;
}
.col{
width: 50%;
padding: 3rem;
}
button{
background-color: #b0ca3a;
padding: 1.5rem;
border-radius: 0.5rem;
border: none;
a{
color: white;
}
}
.benefits{
h4{
color: white;
margin-bottom: 1.5rem;
}
ul li{
color: white;
opacity: 0.5;
}
ul{
display: flex;
flex-direction: column;
}
}
}
The price-benefits div is overflowing the container div. Add overflow:hidden to the container div to clip the price-benefits div, see below
body {
background-color: #e6eff6;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 75rem;
max-width: 100%;
background-color: white;
border-radius: 2rem;
overflow: hidden;
/* added this to clip the content */
}
.container .community {
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.container .community h3 {
color: #45adac;
}
.container .community h4 {
color: #bfdf32;
}
.container .community p {
max-width: 60rem;
color: #a8acb5;
}
.container .price-benefits {
display: flex;
}
.container .price {
background-color: #2bb3b1;
display: flex;
flex-direction: column;
gap: 2rem;
}
.container .price h4 {
color: white;
}
.container .price p {
color: white;
}
.container .price-dollars {
display: flex;
gap: 2rem;
align-items: center;
}
.container .price-dollars h3 {
color: white;
}
.container .price-dollars p {
color: white;
opacity: 0.5;
}
.container .benefits {
background-color: #4abebd;
}
.container .col {
width: 50%;
padding: 3rem;
}
.container button {
background-color: #b0ca3a;
padding: 1.5rem;
border-radius: 0.5rem;
border: none;
}
.container button a {
color: white;
}
.container .benefits h4 {
color: white;
margin-bottom: 1.5rem;
}
.container .benefits ul li {
color: white;
opacity: 0.5;
}
.container .benefits ul {
display: flex;
flex-direction: column;
}
<div class="container">
<div class="community">
<h3>Join our community</h3>
<h4>30-day, hassle-free money back guarantee</h4>
<p>Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills.</p>
</div>
<div class="price-benefits">
<div class="price col">
<h4>Monthy Subscription</h4>
<div class="price-dollars">
<h3>$29</h3>
<p>per month</p>
</div>
<p>Full access for less than $1 a day</p>
<button>Sign up</button>
</div>
<div class="benefits col">
<h4>Why Us</h4>
<ul>
<li>Tutorials by industry experts</li>
<li>Peer & expert code review</li>
<li>Coding exercises</li>
<li>Access to our GitHub repos</li>
<li>Community forum</li>
<li>Flashcard decks</li>
<li>New videos every week</li>
</ul>
</div>
</div>
</div>
try this:
add border-radius to price-benefits like this:
.price-benefits{
display: flex;
border-radius: 10px;
}
https://capr1sun.github.io/popsociology/
The main page of my website has an extra space on the right side which shows when I simulate smaller devices (iPhones). And on my desktop, there's a horizontal scroll bar at the bottom. How do I get rid of the extra space so the content fits exactly on the screen?
#import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght#0,300;0,400;0,700;0,900;1,900&display=swap');
:root {
--mainbgcolor: #FDFBEC;
--logo: #F4C553;
--green: #E1EEDD;
--greentext: #153A1E;
--orange: #EE9F4A;
}
html, body {
margin: 0 auto;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mainbgcolor);
color: var(--logo);
padding: 0px 20px;
font-size: small;
}
#logo {
font-weight: 900;
}
header a, li {
text-decoration: none;
list-style: none;
color: var(--orange);
font-weight: 700;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 16px
}
main {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.icon-container {
padding: 10px 20px;
display: grid;
gap: 15px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
}
.info-icons-container {
padding: 5px 20px;
text-align: center;
}
#conceptName {
font-weight: 700;
font-size: 2rem;
margin: 5px 0px 10px 0px;
}
.conceptInfo {
font-size: 0.8rem;
}
footer {
background-color: var(--orange);
color: var(--mainbgcolor);
text-align: center;
margin-top: auto;
}
.icon img {
width: 55px;
height: auto;
cursor: pointer;
}
.icon img:hover {
box-shadow: 0 0 5px 5px var(--orange);
}
.info-icons-container {
align-items: center;
justify-content: center;
animation: transitionIn 0.75s;
}
/*transition*/
#keyframes transitionIn {
from {
opacity: 0;
transform: rotateX(-10deg);
}
to {
opacity: 1;
transform: rotateX(0);
}
}
/* ABOUT PAGE */
.about {
display: flex;
flex-direction: column;
padding: 20px;
}
.large-img-container {
display: flex;
align-items: center;
justify-content: center;
}
.large-img-container img {
display: block;
width: 200px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 20px;
text-align: center;
}
.about h1, .about h3 {
color: var(--orange);
}
.about p {
text-align: justify;
}
/*SLIDER PAGE*/
.imgslider {
align-items: center;
justify-content: center;
}
.controls {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
}
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 80px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1190px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media (min-width:1200px) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 50px;
}
.info-icons-container {
margin-bottom: 20px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
footer {
width: 100%;
}
}
#media (min-width:1281px) {
header {
font-size: large;
padding: 0 5px;
justify-content: space-around;
}
footer {
width: 100vw;
}
.icon-container {
gap: 30px;
}
main {
align-items: center;
}
.info-icons-container {
width: 50%;
}
#description{
font-size: 1.5rem;
}
.about {
display: flex;
flex-direction: row;
padding: 20px 100px 20px 20px;
}
.large-img-container {
display: block;
padding-left: 200px;
}
.large-img-container img {
width: 500px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 100px;
display: block;
}
.about h1, .about h3 {
color: var(--orange);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<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>Pop Sociology</title>
</head>
<body id="body">
<header>
<div class="left">
<h1 id="logo">Pop Sociology!</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</header>
<main>
<div class="icon-container">
<div class="icon">
<img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon">
</div>
<div class="icon">
<img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon">
</div>
<div class="icon">
<img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon">
</div>
<div class="icon">
<img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon">
</div>
<div class="icon">
<img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon">
</div>
<div class="icon">
<img src="socialization2.png" alt="Socialization" id="socialization">
</div>
<div class="icon">
<img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon">
</div>
<div class="icon">
<img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon">
</div>
<div class="icon">
<img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon">
</div>
<div class="icon">
<img src="labeling2.png" alt="Labeling Theory" id="labelingIcon">
</div>
<div class="icon">
<img src="feminism2.png" alt="Feminist Theory" id="feminismIcon">
</div>
<div class="icon">
<img src="critical2.png" alt="Critical Theory" id="criticalIcon">
</div>
<div class="icon">
<img src="strain2.png" alt="Social Strain Theory" id="strainIcon">
</div>
<div class="icon">
<img src="rational2.png" alt="Rational Theory" id="rationalIcon">
</div>
<div class="icon">
<img src="game2.png" alt="Game Theory" id="gameIcon">
</div>
<div class="icon">
<img src="sociobiology2.png" alt="Sociobiology" id="sociobiologyIcon">
</div>
<div class="icon">
<img src="chaos2.png" alt="Chaos Theory" id="chaosIcon">
</div>
<div class="icon">
<img src="gears2.png" alt="Social Phenomenology" id="phenomonologyIcon">
</div>
<div class="icon">
<img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon">
</div>
<div class="icon">
<img src="macro2.png" alt="Macro Theory" id="macroIcon">
</div>
<div class="icon">
<img src="comte2.png" alt="August Comte" id="comteIcon">
</div>
<div class="icon">
<img src="marx2.png" alt="Karl Marx" id="marxIcon">
</div>
<div class="icon">
<img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon">
</div>
<div class="icon">
<img src="weber2.png" alt="Max Weber" id="weberIcon">
</div>
<div class="icon">
<img src="spencer2.png" alt="Herbert Spencer" id="spencerIcon">
</div>
</div>
<div class="info-icons-container">
<h3 id="conceptName"><span id="conceptNameDisplay">Bite-sized sociology for the new generation!</h3></span>
<p id="description"><span id="conceptInfoDisplay">What do you want to learn today?</span></p></span>
</div>
</main>
<footer>
<p>Created by Me</p>
</footer>
<script src="script.js"></script>
</body>
</html>
The problem is in
footer {
width: 100vw;
}
You can just remove it or use 100% rather than 100vw, and add width: 100% to body tag.
There is a scroll due to the size of the anchors text. So you can set a relative size to them. For example font-size: 2.2vw for .icon-container:
#import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght#0,300;0,400;0,700;0,900;1,900&display=swap');
:root {
--mainbgcolor: #FDFBEC;
--logo: #F4C553;
--green: #E1EEDD;
--greentext: #153A1E;
--orange: #EE9F4A;
}
html, body {
margin: 0 auto;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mainbgcolor);
color: var(--logo);
padding: 0px 20px;
font-size: small;
}
#logo {
font-weight: 900;
}
header a, li {
text-decoration: none;
list-style: none;
color: var(--orange);
font-weight: 700;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 16px
}
main {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.icon-container {
padding: 10px 20px;
display: grid;
gap: 15px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
font-size: 2.2vw; /* here */
}
.info-icons-container {
padding: 5px 20px;
text-align: center;
}
#conceptName {
font-weight: 700;
font-size: 2rem;
margin: 5px 0px 10px 0px;
}
.conceptInfo {
font-size: 0.8rem;
}
footer {
background-color: var(--orange);
color: var(--mainbgcolor);
text-align: center;
margin-top: auto;
}
.icon img {
width: 55px;
height: auto;
cursor: pointer;
}
.icon img:hover {
box-shadow: 0 0 5px 5px var(--orange);
}
.info-icons-container {
align-items: center;
justify-content: center;
animation: transitionIn 0.75s;
}
/*transition*/
#keyframes transitionIn {
from {
opacity: 0;
transform: rotateX(-10deg);
}
to {
opacity: 1;
transform: rotateX(0);
}
}
/* ABOUT PAGE */
.about {
display: flex;
flex-direction: column;
padding: 20px;
}
.large-img-container {
display: flex;
align-items: center;
justify-content: center;
}
.large-img-container img {
display: block;
width: 200px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 20px;
text-align: center;
}
.about h1, .about h3 {
color: var(--orange);
}
.about p {
text-align: justify;
}
/*SLIDER PAGE*/
.imgslider {
align-items: center;
justify-content: center;
}
.controls {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
}
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 80px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1190px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media (min-width:1200px) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 50px;
}
.info-icons-container {
margin-bottom: 20px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
footer {
width: 100%;
}
}
#media (min-width:1281px) {
header {
font-size: large;
padding: 0 5px;
justify-content: space-around;
}
footer {
width: 100vw;
}
.icon-container {
gap: 30px;
}
main {
align-items: center;
}
.info-icons-container {
width: 50%;
}
#description{
font-size: 1.5rem;
}
.about {
display: flex;
flex-direction: row;
padding: 20px 100px 20px 20px;
}
.large-img-container {
display: block;
padding-left: 200px;
}
.large-img-container img {
width: 500px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 100px;
display: block;
}
.about h1, .about h3 {
color: var(--orange);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<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>Pop Sociology</title>
</head>
<body id="body">
<header>
<div class="left">
<h1 id="logo">Pop Sociology!</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</header>
<main>
<div class="icon-container">
<div class="icon">
<img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon">
</div>
<div class="icon">
<img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon">
</div>
<div class="icon">
<img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon">
</div>
<div class="icon">
<img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon">
</div>
<div class="icon">
<img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon">
</div>
<div class="icon">
<img src="socialization2.png" alt="Socialization" id="socialization">
</div>
<div class="icon">
<img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon">
</div>
<div class="icon">
<img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon">
</div>
<div class="icon">
<img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon">
</div>
<div class="icon">
<img src="labeling2.png" alt="Labeling Theory" id="labelingIcon">
</div>
<div class="icon">
<img src="feminism2.png" alt="Feminist Theory" id="feminismIcon">
</div>
<div class="icon">
<img src="critical2.png" alt="Critical Theory" id="criticalIcon">
</div>
<div class="icon">
<img src="strain2.png" alt="Social Strain Theory" id="strainIcon">
</div>
<div class="icon">
<img src="rational2.png" alt="Rational Theory" id="rationalIcon">
</div>
<div class="icon">
<img src="game2.png" alt="Game Theory" id="gameIcon">
</div>
<div class="icon">
<img src="sociobiology2.png" alt="Sociobiology" id="sociobiologyIcon">
</div>
<div class="icon">
<img src="chaos2.png" alt="Chaos Theory" id="chaosIcon">
</div>
<div class="icon">
<img src="gears2.png" alt="Social Phenomenology" id="phenomonologyIcon">
</div>
<div class="icon">
<img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon">
</div>
<div class="icon">
<img src="macro2.png" alt="Macro Theory" id="macroIcon">
</div>
<div class="icon">
<img src="comte2.png" alt="August Comte" id="comteIcon">
</div>
<div class="icon">
<img src="marx2.png" alt="Karl Marx" id="marxIcon">
</div>
<div class="icon">
<img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon">
</div>
<div class="icon">
<img src="weber2.png" alt="Max Weber" id="weberIcon">
</div>
<div class="icon">
<img src="spencer2.png" alt="Herbert Spencer" id="spencerIcon">
</div>
</div>
<div class="info-icons-container">
<h3 id="conceptName"><span id="conceptNameDisplay">Bite-sized sociology for the new generation!</h3></span>
<p id="description"><span id="conceptInfoDisplay">What do you want to learn today?</span></p></span>
</div>
</main>
<footer>
<p>Created by Me</p>
</footer>
<script src="script.js"></script>
</body>
</html>
your width property in footer element cause overflow-x this snippet may help:
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
footer {
width: 100%;
}
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>
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>
I created a footer that I would like to reproduce on my site, after many tests here is the best result obtained:
The image of the footer I would like to make : https://i.imgur.com/QpmoreU.png
How can I match the image on my site please? I have tried so many things that I don't even understand what I'm doing so if you have any explanations and help I'd be delighted...
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.topbar {
height: 80px;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
font-size: 21px;
}
.topbar nav a:hover, .topbar nav a.active {
color: #94C8D0;
}
.header-logo {
padding: 0px 20px;
cursor: pointer;
width: 25vh;
}
.login {
display: flex;
justify-content: end;
flex-direction: row-reverse;
}
.login_btn {
margin: auto 25px auto;
background-color: #EEEEEE;
color: #3b3b3b;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.header_title {
text-align: center;
color: #ffffff;
font-family: 'Inter', sans-serif;
font-weight: 1000;
font-size: 72px;
word-spacing: 0px;
margin: 0px;
padding: 0px;
letter-spacing: normal;
line-height: 72px;
}
.header_second_title {
text-align: center;
color: #9F9F9F;
font-family: 'Inter';
font-size: 30px;
margin: 16px 0px 0px;
padding: 0px;
line-height: 36px;
font-weight: 500;
}
.container {
display: flex;
justify-content: center;
flex-direction: row;
}
.invite_btn {
font-size: 24px;
font-family: 'Inter';
background-color: #1A9BB6;
color: #ffffff;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
.support_btn {
font-size: 24px;
font-family: 'Inter';
background-color: #EEEEEE;
color: #282828;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr .6fr .6fr 1fr;
grid-template-areas: "logo product resources business"
"social . . design";
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
justify-content: end;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 1em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
}
<!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>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Premium
Support
<div class="login">
Login<i class="fas fa-sign-in-alt"></i>
</div>
</div>
</nav>
</header>
<div class="circuit">
<h1 class="header_title">The Perfect <br>Discord Music Bot.</h1>
<h2 class="header_second_title">Poseidon is the only Discord bot you'll ever need!</h2>
<div class='container'>
Invite
Support
</div>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord
ID</span></div> <!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
I just add a new class as .links and fix your Products Resources and Business you can check it, and change a little bit about right bottom edge text, give footer relative and text to absoulte right:0 bottom : 0 and make text smaller. Hope helps.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: flex;
height: 20%;
background-color: black;
color: white;
padding-top:3em;
position:relative;
justify-content:space-between;
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
justify-content: end;
}
.links{
display:flex;
flex-direction:column;
justify-content:space-between;
height:50%;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
padding-bottom:2rem;
width:40%;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.right-side{
width:60%;
display:flex;
}
.right-side div{
margin-right:2em;
}
.right-side div b{
display:inline-block;
padding-bottom:1em;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 0.7em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
position:absolute;
bottom:0;
left:1em;
cursor: pointer;
}
.design {
grid-area: design;
position:absolute;
right:0;
bottom:0;
font-size: 1em;
text-align: right;
}
<!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>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<div class="right-side">
<div>
<b>Product</b>
<ul class="links">
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
</div>
<div>
<b>Resources</b>
<ul class="links">
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
</div>
<div>
<b>Business</b>
<ul class="links">
<li>Contact</li>
</ul>
</div>
</div>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord ID</span></div> <!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
How about trying this one? I have kept the codes relevant to the footer part only.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr 1fr 1fr 1.3fr;
grid-template-areas: "logo product resources business" "social . . design";
align-items: flex-start;
}
#footer ul {
margin-top: .5rem;
}
#footer ul li {
list-style: none;
padding-top: 5%;
font-size: 1rem;
line-height: 1px;
margin-top: 10px;
}
.flex {
display: flex;
justify-content: end;
}
#footer ul li a {
color: rgb(22, 145, 176);
text-decoration: none;
font-size: .7rem;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: .65em;
color: rgb(97, 97, 97);
}
.product {
grid-area: product;
font-size: 20px;
}
.resources {
grid-area: resources;
font-size: 20px;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
align-self: end;
}
<!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>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord
ID</span></div>
<!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
Hope this solves your problem!