<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<div class="container">
<div class="main">
</div>
<div class="content1">
</div>
<div class="content2">
</div>
<div class="content3">
</div>
<div class="content4">
</div>
<div class="subcontent">
</div>
<div class="footer">
</div>
</div>
</html>
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-column-gap: 10px;
grid-row-gap: 5px;
background:#25523B;
}
.main {
grid-area: 1 / 1 / 2 / 5;
background-color: #77dd76;
color:white;
font-weight: bold;
border-radius: 10px;
}
.content1 {
grid-area: 2 / 1 / 6 / 2;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.content2 {
grid-area: 2 / 2 / 6 / 3;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.content3 {
grid-area: 2 / 3 / 6 / 4;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.content4 {
grid-area: 2 / 4 / 6 / 5;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.subcontent {
grid-area: 6 / 1 / 7 / 5;
background-color: #77dd76;
border-radius: 25px;
}
.footer {
grid-area: 7 / 1 / 8 / 5;
background-color: #77dd76;
color:white;
font-weight: bold;
border-radius: 10px;
}
table {
font-family: Georgia, serif;
border: 6px solid white;
background-color: #D4EED1;
width: 100%;
text-align: center;
border-radius: 25px;
padding: 20px;
width: 200px;
height: 150px;
}
So the problem with this css is that my container div seems way bigger than my other div. So i would like to know if there is a way on how to keep the same div ratio between the other div so that it stays within the container div but must be filled.
As of now the other div are not going full screen even when the container div is.
you can change grid-template-column : repeat(4,1fr) or you can delete this grid-template-column
I have tried and it works
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-column-gap: 10px;
grid-row-gap: 5px;
background:#25523B;
}
.main {
grid-area: 1 / 1 / 2 / 5;
background-color: #77dd76;
color:white;
font-weight: bold;
border-radius: 10px;
}
.content1 {
grid-area: 2 / 1 / 6 / 2;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.content2 {
grid-area: 2 / 2 / 6 / 3;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.content3 {
grid-area: 2 / 3 / 6 / 4;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.content4 {
grid-area: 2 / 4 / 6 / 5;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.subcontent {
grid-area: 6 / 1 / 7 / 5;
background-color: #77dd76;
border-radius: 25px;
}
.footer {
grid-area: 7 / 1 / 8 / 5;
background-color: #77dd76;
color:white;
font-weight: bold;
border-radius: 10px;
}
table {
font-family: Georgia, serif;
border: 6px solid white;
background-color: #D4EED1;
width: 100%;
text-align: center;
border-radius: 25px;
padding: 20px;
width: 200px;
height: 150px;
}
<div class="container">
<div class="main">
</div>
<div class="content1">
</div>
<div class="content2">
</div>
<div class="content3">
</div>
<div class="content4">
</div>
<div class="subcontent">
</div>
<div class="footer">
</div>
</div>
I have this code:
.container {
margin-right: auto;
margin-left: auto;
max-width: 1400px;
padding-left: 1rem;
padding-right: 1rem;
}
.grid { display: grid }
.vh-100 { min-height: 100vh;}
.grid-gap { grid-gap: 0.7rem; }
.flex { display: flex; -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; }
.text-center { text-align: center; }
.flex-dir-col { flex-direction: column; }
.relative { position: relative; }
.absolute { position: absolute; }
.img-fluid { max-width: 100%; height: auto; }
.content-wrapper .container {
grid-auto-flow: row dense;
-ms-grid-columns: 3fr 1fr;
grid-template-columns: 3fr 1fr;
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
gap: 0px 35px;
}
.content-wrapper .container .main-content {
-ms-grid-row: 1;
-ms-grid-row-span: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-area: 1 / 1 / 2 / 3;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-sharing .icon {
width: 50px;
height: 50px;
background-color: #f1f1f1;
margin-bottom: 20px;
border-radius: 30%;
-webkit-border-radius: 30%;
-moz-border-radius: 30%;
-ms-border-radius: 30%;
-o-border-radius: 30%;
color: #3ab77d;
-webkit-box-shadow: 0px 5px 15px -5px #00000070;
box-shadow: 0px 5px 15px -5px #00000070;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-sharing .icon i {
line-height: 50px;
font-size: 20px;
transition: all .4s;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-sharing .icon:hover {
background-color: #3ab77d;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-sharing .icon:hover i {
color: #f1f1f1;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-featured-image {
overflow: hidden;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-featured-image .post-date {
top: 1rem;
left: 1rem;
background-color: #fff;
width: 50px;
height: 50px;
line-height: 1.5;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-featured-image .post-date .day {
font-size: 1rem;
padding-top: .2rem;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-featured-image .post-date .month {
font-size: 0.75rem;
}
.content-wrapper .container .sidebar {
-ms-grid-row: 1;
-ms-grid-row-span: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-area: 1 / 2 / 2 / 3;
position: relative;
background-color: rgba(255, 0, 0, 0.468);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css" rel="stylesheet"/>
<section class="content-wrapper mt-2 mb-2">
<div class="container grid vh-100 grid-gap">
<div class="main-content">
<div class="post-content">
<div class="post-content-top flex">
<div class="post-sharing flex flex-dir-col mr-1 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-reddit"></i>
<i class="bi bi-whatsapp"></i>
</div>
<div class="post-featured-image relative">
<img src="https://cdn.pixabay.com/photo/2022/06/14/17/30/beach-7262493_1280.jpg" class="img-fluid">
<div class="post-date absolute flex flex-dir-col text-center">
<span class="day">23</span>
<span class="month">JUL</span>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar">
This is the sidebar
</div>
</div>
</section>
So this should be a blog like layout with a main content and a sidebar on the right. My problem is that the image is overflowing its div and it flows underneath the sidebar. I added a slightly transparent background color to the sidebar so it's more visible.
I tried to add max-width: 100% and height: auto; to the image as recommended here, but it didn't work. I also tried to add overflow: hidden to the parent div of the image, but no luck. But I wouldn't want to clip the image anyway.
I don't understand because max-width: 100% and height: auto; should make the image responsive, right?
Any idea what I'm doing wrong? Thanks
There are 2 ways to achieve this:
You can cut the image which is being overflowed.
overflow-x: hidden;
You can either give detailed stylings, like this
*{
margin: 0;
padding:0;
}
img{
width: 100%;
height: 100%;
}
.image_container{
max-width: 100vw;
max-height: 100vw;
}
<div class="image_container">
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/80a9d98d-327f-4bb2-b173-4298d710e51c/derkflv-9f975f3d-791f-4e16-8d9d-fb0a9e5e0554.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgwYTlkOThkLTMyN2YtNGJiMi1iMTczLTQyOThkNzEwZTUxY1wvZGVya2Zsdi05Zjk3NWYzZC03OTFmLTRlMTYtOGQ5ZC1mYjBhOWU1ZTA1NTQucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.eEDVAlJGBqXo6OeZEORXWk1veGSHFL-ZTUMz43Jtr3Q" alt="image">
<div>
Hello I was trying to have a button for each pic in the grid but as you can see in the pic my first button is on the top of the grid but my second button is on back I want both button on front. I tried putting item1 after item2 and item3 and I also tried changing the class of the button but didnt work. I am a beginner so a beginner friendly answer is a plus :)
#import url('https://fonts.googleapis.com/css2?family=Mukta:wght#200&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Smooch+Sans&display=swap');
/* font-family: 'Mukta', sans-serif; */
:root {
--main-bg-color: #2874f0;
}
.grid1 {
display: flex;
align-items: center;
justify-content: center;
grid-gap: 40px 100px auto;
grid-column-gap: 30px;
grid-template-columns: auto auto auto auto;
}
.items {
margin: 42px 59px;
display: grid;
justify-content: center;
align-items: center;
width: 372px;
height: 47px;
font-size: 36px;
background-color: black;
color: white;
font-family: 'Oswald', sans-serif;
}
.box {
display: grid;
/* background-color: yellow; */
height: 56vh;
/* grid-row-gap: 2px;
grid-column-gap: 9px; */
/* grid-gap: 2px 9px; */
/* grid-gap: 9px; */
/* grid-template-columns: 34px 334px auto;
grid-template-rows: 44px 84px; */
grid-template-columns: 500px 500px 500px;
grid-template-rows: 500px 500px 500px;
justify-content: center;
width: 80vw;
margin: 0vh 10vw;
}
.btn {
width: 1000px;
height: 90px;
color: white;
background-color: var(--main-bg-color);
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
font-family: 'Smooch Sans', sans-serif;
font-size: 68px;
margin: 912px 0px 0px 0px;
}
#btn2 {
margin: 0px 0px 0px 0px;
}
/* .btn2{
width: 1000px;
height: 90px;
color: white;
background-color: var(--main-bg-color);
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
font-family: 'Smooch Sans', sans-serif;
font-size: 68px;
margin: 912px 0px 0px 0px;
} */
.item {
background-color: aquamarine;
border: 2px solid red;
}
.item1 {
background-image: url("minar.jpg");
height: 100%;
background-size: cover;
border: 2px solid red;
grid-column: 1/3;
grid-row: 1/3;
}
.item2 {
background-image: url("quaid.JPG");
height: 100%;
background-size: cover;
border: 2px solid red;
}
.item3 {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Badshahi_Mosque_front_picture.jpg/1200px-Badshahi_Mosque_front_picture.jpg");
height: 100%;
background-size: cover;
border: 2px solid red;
}
.heading {
display: flex;
justify-content: 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>Document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<header>
<div class="grid1">
<p class="items">Home</p>
<p class="items">Contact</p>
<p class="items">About</p>
<p class="items">Products</p>
</div>
</header>
<main>
<div class="container">
<h1 class="heading">Places to visit in Pakistan</h1>
<div class="box">
<div class="item1">
<button class="btn">Learn More → </button>
</div>
<div class="item2"> <button class="btn">Learn More → </button></div>
<div class="item3">3</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
You need to give:
.btn{
position: relative;
}
This will solve your problem. Both buttons will come in front of the image.
You need to use the z-index property in CSS. U need to put z-index: 1 to all button and z-index: 0 to all items. I have demonstrated it on the item3. Also why don't you use ID for item1, item2 and so on? And put some common class on all of them
#import url('https://fonts.googleapis.com/css2?family=Mukta:wght#200&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Smooch+Sans&display=swap');
/* font-family: 'Mukta', sans-serif; */
:root {
--main-bg-color: #2874f0;
}
.grid1 {
display: flex;
align-items: center;
justify-content: center;
grid-gap: 40px 100px auto;
grid-column-gap: 30px;
grid-template-columns: auto auto auto auto;
}
.items {
margin: 42px 59px;
display: grid;
justify-content: center;
align-items: center;
width: 372px;
height: 47px;
font-size: 36px;
background-color: black;
color: white;
font-family: 'Oswald', sans-serif;
}
.box {
display: grid;
/* background-color: yellow; */
height: 56vh;
/* grid-row-gap: 2px;
grid-column-gap: 9px; */
/* grid-gap: 2px 9px; */
/* grid-gap: 9px; */
/* grid-template-columns: 34px 334px auto;
grid-template-rows: 44px 84px; */
grid-template-columns: 500px 500px 500px;
grid-template-rows: 500px 500px 500px;
justify-content: center;
width: 80vw;
margin: 0vh 10vw;
}
.btn {
width: 1000px;
height: 90px;
color: white;
background-color: var(--main-bg-color);
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
font-family: 'Smooch Sans', sans-serif;
font-size: 68px;
margin: 912px 0px 0px 0px;
z-index: 1;
}
#btn2 {
margin: 0px 0px 0px 0px;
}
/* .btn2{
width: 1000px;
height: 90px;
color: white;
background-color: var(--main-bg-color);
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
font-family: 'Smooch Sans', sans-serif;
font-size: 68px;
margin: 912px 0px 0px 0px;
} */
.item {
background-color: aquamarine;
border: 2px solid red;
}
.item1 {
background-image: url("minar.jpg");
height: 100%;
background-size: cover;
border: 2px solid red;
grid-column: 1/3;
grid-row: 1/3;
z-index: 0;
}
.item2 {
background-image: url("quaid.JPG");
height: 100%;
background-size: cover;
border: 2px solid red;
z-index: 0;
}
.item3 {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Badshahi_Mosque_front_picture.jpg/1200px-Badshahi_Mosque_front_picture.jpg");
height: 100%;
background-size: cover;
border: 2px solid red;
}
.heading {
display: flex;
justify-content: 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>Document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<header>
<div class="grid1">
<p class="items">Home</p>
<p class="items">Contact</p>
<p class="items">About</p>
<p class="items">Products</p>
</div>
</header>
<main>
<div class="container">
<h1 class="heading">Places to visit in Pakistan</h1>
<div class="box">
<div class="item1">
<button class="btn">Learn More → </button>
</div>
<div class="item2"> <button class="btn">Learn More → </button></div>
<div class="item3">3</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
EDIT I just realized that I put the z-index: 0; on item 2 and item1 but it applying to item3 too. I dont know why...
I am building this calculator, which made me go insane this afternoon. I am using for the first time Grid, till now I only used flex-box...
The problem is that the buttons are going outside the div (calculator). I am building this mainly for mobile. On the mobile simulator on Chrome looked perfect, but as soon as I uploaded it and looked on it on my phone, the buttons are going WAY outside the div...I've build dozens test websites and never had this problem, everything stayed where shoul've been staying.
What am I doing wrong? I've been here for 2 hours trying to make it work and I beggining to feel stupid.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
background: linear-gradient(90deg, rgba(0,244,147,.7), rgba(30,144,255,.7));
}
.calculator {
border: 1px solid rgb(0,0,0,.3);
width: 80vw;
height: 80vh;
margin: auto;
position: relative;
top: 50vh;
transform: translateY(-50%);
border-radius: 10px;
background: rgb(225,225,225);
box-shadow: 0 0 10px rgb(0,0,0,.7), -5px -5px 10px rgb(0,0,0,.3) inset, 5px 5px 5px rgb(255,255,255) inset;
}
.name {
width: 100%;
height: 3%;
position: absolute;
}
h5 {
display: flex;
justify-content: center;
align-items: center;
font-size: .8em;
color: rgb(0,0,0,.5);
position: relative;
top: 50%;
transform: translateY(-50%);
}
.output {
width: 90%;
height: 25%;
margin: auto;
margin-top: 5.5%;
background: white;
box-shadow: 0 0 5px rgb(0,0,0,.7) inset ;
border-radius: 3px;
}
.previous {
width: 100%;
height: 40%;
border-bottom: .5px solid rgb(0,0,0,.5);
}
.current {
width: 100%;
height: 60%;
}
.keyboardparent {
width: 90%;
height: 75%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border:3px solid red;
}
.keyboard {
width: 100%;
height: 90%;
margin: auto;
border:3px solid black;
}
.top {
display: grid;
grid-template-columns: 2fr 1.5fr 1fr;
grid-gap: .5em;
-webkit-gap: .5em;
}
.rest {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: .5em;
-webkit-grid-gap: .5em;
margin-top: .5em;
}
button {
cursor: pointer;
font-size: 1.5em;
padding: 10px;
border-radius: 10px;
border: none;
box-shadow: 0 0 3px rgba(0,0,0,.5), -3px -3px 5px rgba(0,0,0,.3) inset, 3px 3px 5px rgba(255,255,255,.8) inset;
outline: none;
background: rgba(250,250,250,.8);
}
.color {
background: rgba(0,200,197,.3);
}
button:active {
transform: scale(.95);
}
<div class="calculator">
<div class="name">
<h5>Matthew Industries INC</h5>
</div>
<div class="output">
<div class="previous"></div>
<div class="current"></div>
</div>
<div class="keyboardparent">
<div class="keyboard">
<div class="top">
<button class="colorc">C</button>
<button class="color"><img src="delete.svg" class="delete" width="20px" alt=""></button>
<button class="color">%</button>
</div>
<div class="rest">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="color">/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="color">x</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="color">-</button>
<button class="color">.</button>
<button>0</button>
<button class="color">=</button>
<button class="color">+</button>
</div>
</div>
</div>
</div>
I found it.
I removed the height from .calculator, gave height: 120px; to .output and added padding: 30px 0; to .keyboardparent.
Thank you for the previous solutions, I didn't think the height of the .calculator set in vh could do some damage.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
background: linear-gradient(90deg, rgba(0,244,147,.7), rgba(30,144,255,.7));
}
.calculator {
border: 1px solid rgb(0,0,0,.3);
width: 80vw;
margin: auto;
position: relative;
top: 50vh;
transform: translateY(-50%);
border-radius: 10px;
background: rgb(225,215,215);
box-shadow: 0 0 10px rgb(0,0,0,.7), -5px -5px 10px rgb(0,0,0,.3) inset, 5px 5px 5px rgb(255,255,255) inset;
}
.name {
width: 100%;
height: 3%;
position: absolute;
}
h5 {
display: flex;
justify-content: center;
align-items: center;
font-size: .8em;
color: rgb(0,0,0,.5);
position: relative;
top: 50%;
transform: translateY(-50%);
}
.output {
width: 90%;
height: 120px;
margin: auto;
margin-top: 5.5%;
background: rgba(180,200,180);
box-shadow: 0 0 5px rgb(0,0,0,.7) inset ;
border-radius: 3px;
}
.previous {
width: 100%;
height: 40%;
border-bottom: .5px solid rgb(0,0,0,.5);
}
.current {
width: 100%;
height: 60%;
}
.keyboardparent {
width: 90%;
height: 75%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 30px 0;
}
.keyboard {
width: 100%;
height: 90%;
margin: auto;
}
.top {
display: grid;
grid-template-columns: 1.5fr 1.5fr 1fr;
grid-gap: .5em;
-webkit-gap: .5em;
}
.rest {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: .5em;
-webkit-grid-gap: .5em;
margin-top: .5em;
}
button {
cursor: pointer;
font-size: 1.5em;
padding: 10px;
border-radius: 10px;
border: none;
box-shadow: 0 0 3px rgba(0,0,0,.5), -3px -3px 5px rgba(0,0,0,.3) inset, 3px 3px 5px rgba(255,255,255,.8) inset;
outline: none;
background: rgba(250,250,250,.8);
text-align: center;
vertical-align: ;
}
.color {
background: rgba(0,200,207,.3);
}
button:active {
transform: scale(.95);
}
.clearall {
background: rgba(255,0,50,.7);
}
.cancel {
background: rgba(255,0,0,.5);
}
<div class="calculator">
<div class="name">
<h5>Matthew Industries INC</h5>
</div>
<div class="output">
<div class="previous"></div>
<div class="current"></div>
</div>
<div class="keyboardparent">
<div class="keyboard">
<div class="top">
<button class="clearall">C</button>
<button class="cancel"><img src="delete.svg" class="delete" width="23px" alt=""></button>
<button class="color">%</button>
</div>
<div class="rest">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="color">/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="color">x</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="color">-</button>
<button class="color">.</button>
<button>0</button>
<button class="color equal">=</button>
<button class="color">+</button>
</div>
</div>
</div>
</div>
height of .calculator the unit vh to % that is
change this
.calculator{
height: 80vh;
}
to
.calculator{
height: 80%;
}
like this height: 50px; to .output instead of height:25%
Also added a margin-bottom to .keyboardparent
.keyboardparent { margin-bottom: 5.5%;} // you already given margin-top: 5.5%; to output
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
background: linear-gradient(90deg, rgba(0,244,147,.7), rgba(30,144,255,.7));
}
.calculator {
border: 1px solid rgb(0,0,0,.3);
width: 80vw;
height: 80%;
margin: auto;
position: relative;
top: 50vh;
transform: translateY(-50%);
border-radius: 10px;
background: rgb(225,225,225);
box-shadow: 0 0 10px rgb(0,0,0,.7), -5px -5px 10px rgb(0,0,0,.3) inset, 5px 5px 5px rgb(255,255,255) inset;
}
.name {
width: 100%;
height: 3%;
position: absolute;
top:10px;
}
h5 {
display: flex;
justify-content: center;
align-items: center;
font-size: .8em;
color: rgb(0,0,0,.5);
position: relative;
top: 50%;
transform: translateY(-50%);
}
.output {
width: 90%;
height: 50px;
margin: auto;
margin-top: 5.5%;
background: white;
box-shadow: 0 0 5px rgb(0,0,0,.7) inset ;
border-radius: 3px;
}
.previous {
width: 100%;
height: 40%;
border-bottom: .5px solid rgb(0,0,0,.5);
}
.current {
width: 100%;
height: 60%;
}
.keyboardparent {
width: 90%;
height: 75%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border:3px solid red;
margin-bottom: 5.5%;
}
.keyboard {
width: 100%;
height: 90%;
margin: auto;
border:3px solid black;
}
.top {
display: grid;
grid-template-columns: 2fr 1.5fr 1fr;
grid-gap: .5em;
-webkit-gap: .5em;
}
.rest {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: .5em;
-webkit-grid-gap: .5em;
margin-top: .5em;
}
button {
cursor: pointer;
font-size: 1.5em;
padding: 10px;
border-radius: 10px;
border: none;
box-shadow: 0 0 3px rgba(0,0,0,.5), -3px -3px 5px rgba(0,0,0,.3) inset, 3px 3px 5px rgba(255,255,255,.8) inset;
outline: none;
background: rgba(250,250,250,.8);
}
.color {
background: rgba(0,200,197,.3);
}
button:active {
transform: scale(.95);
}
<div class="calculator">
<div class="name">
<h5>Matthew Industries INC</h5>
</div>
<div class="output">
<div class="previous"></div>
<div class="current"></div>
</div>
<div class="keyboardparent">
<div class="keyboard">
<div class="top">
<button class="colorc">C</button>
<button class="color"><img src="delete.svg" class="delete" width="20px" alt=""></button>
<button class="color">%</button>
</div>
<div class="rest">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="color">/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="color">x</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="color">-</button>
<button class="color">.</button>
<button>0</button>
<button class="color">=</button>
<button class="color">+</button>
</div>
</div>
</div>
</div>
margin bottom seems to disappear on css grid when overflow appears.
no matter which way i approach the layout of my page (flexbox, css grid, fixed) i seem to loose margin/padding bottom when using css grid.
an example of the issue:
HTML
<div class="header"> </div>
<div class="nav"> </div>
<div class="article">
<div class="settings__grid">
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
</div>
</div>
CSS
html,
body {
margin: 0;
height: 100%;
}
.header {
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 20px;
background: white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
}
.nav {
position: fixed;
z-index: 1;
top: 20px;
left: 0;
width: 200px;
height: calc(100% - 20px);
background: #FAF9F8;
border-right: 1px solid #d9d9d9;
}
.article {
background: #F3F3F5;
position: relative;
top: 20px;
left: 200px;
width: calc(100% - 200px);
height: calc(100% - 20px);
padding: 10px;
}
.settings__grid {
display: grid;
height: 100%;
grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
grid-auto-rows: 14rem;
grid-gap: 3rem;
}
.settings__grid-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
text-align: center;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
#media (max-width: 768px) {
.nav {
bottom: 0;
left: 0;
right: 0;
top: auto;
width: 100%;
height: 60px;
}
.article {
height: calc(100% - 80px);
left: 0;
width: 100%;
}
}
https://codepen.io/anon/pen/EzWmeg
i expect the margin/padding to be consistent to what i define on parent but it doesn't and disappears / collapses
The problem is merely in setting a height on .article; this sets the height to be the initial viewport (with no consideration given to the scroll).
Removing this height solves the problem:
html,
body {
margin: 0;
height: 100%;
}
.header {
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 20px;
background: white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
}
.nav {
position: fixed;
z-index: 1;
top: 20px;
left: 0;
width: 200px;
height: calc(100% - 20px);
background: #FAF9F8;
border-right: 1px solid #d9d9d9;
}
.article {
background: #F3F3F5;
position: relative;
top: 20px;
left: 200px;
width: calc(100% - 200px);
/*height: calc(100% - 20px);*/
padding: 10px;
}
.settings__grid {
display: grid;
height: 100%;
grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
grid-auto-rows: 14rem;
grid-gap: 3rem;
}
.settings__grid-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
text-align: center;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
#media (max-width: 768px) {
.nav {
bottom: 0;
left: 0;
right: 0;
top: auto;
width: 100%;
height: 60px;
}
.article {
/*height: calc(100% - 80px);
left: 0;
width: 100%;
}
}
<div class="header"> </div>
<div class="nav"> </div>
<div class="article">
<div class="settings__grid">
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
</div>
</div>
You can set the after to do my trick:
&::after {
content: '';
position: relative;
height: 16rem;
width: 100%;
}