There is a div that covers one part of my page in my project. I wanna set its height to cover all of the objects that are located inside of it, so i put fit-content as its height property. But, for some reason its height is 0, although there is a header and grid in it. I tried to change to different positions and set max-content, nothing changed. Also I tried to change line-height in almost-header h1, but it seems like nothing actually works. Something similar is with grid-container, that's height is not covering the last grid-item completely, if you drop the padding. This is the code for the snippet I'm struggling with:
body{
font: normal 100% "Sathu", sans-serif;
background: #181818;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.secondary{
position: absolute;
top: 0;
left: 0;
height: fit-content;
width: 100%;
padding: 0;
margin: 0;
background-color: #FFFFFF;
}
.almost-header{
position: absolute;
background-color: #181818;
height: 20%;
width: 100%;
left: 0;
top: 0;
right: 0;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.almost-header h1{
position: absolute;
left: 5%;
margin: 0;
padding: 0;
font-size: 4em; /* 64px/16px*/
line-height: 1;
/*width: fit-content;*/
/*max-width: 60%;*/
color: #FFFFFF;
width: 90%;
border-bottom: #FFFFFF 1px solid;
}
/*#break-line{*/
/* position: absolute;*/
/* width: calc(100% - 2*70px);*/
/* height: 5px;*/
/* left: 70px;*/
/* top: 9vh;*/
/* background: #FFFFFF;*/
/*}*/
.grid-container{
box-sizing: border-box;
position: absolute;
padding-right: 5%;
padding-left: 5%;
padding-bottom: 15%;
padding-top: 0%;
display: grid;
column-gap: 1%;
row-gap: 1%;
width: 100%;
height: fit-content;
margin: 0;
top: 20%;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
border-bottom: white 1px solid;
}
.grid-item{
width: 100%;
height: 100%;
transition: .5s;
}
.grid-item:hover{
box-shadow: grey 0 5px 8px, grey 0 -5px 8px, grey 5px 0 8px, grey -5px 0 8px;
}
.grid-item-image{
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
.grid-item-image img{
object-fit: cover;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
flex-shrink: 0;
}
.grid-item-footer{
box-sizing: border-box;
padding: 5px;
top: 0;
margin: 0;
height: 15%;
background-color: #E6E6E6;
}
.grid-item-footer p{
color: #333333;
line-height: 1;
}
.footer-city{
margin: 0;
margin-bottom: 10px;
font-style: normal;
font-weight: 800;
font-size: 2em;
line-height: 38px;
color: #333333;
/*margin-bottom: 5px;*/
}
.footer-author-date{
margin: 0;
font-family: 'Barlow', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 1.125em;
line-height: 22px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href= "styles.css">
</head>
<body>
<div class="secondary">
<div class="almost-header">
<h1 id="save-cities">
Check this out:
</h1>
</div>
<div class="grid-container">
<div class="grid-item" id="grid-item0">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item1">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item2">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item3">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item4">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item5">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item6">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item7">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
</div>
</div>
</body>
</html>
Here is some refactoring. Less CSS is always more 🙂
Your gap of 1% was causing the height issue, I don't know grid well enough to explain why.
* {
box-sizing: border-box;
}
body {
background: #181818;
}
header {
background-color: #181818;
min-height: 20%;
display: grid;
place-content: center;
}
h1 {
font-size: 4em;
margin: 0;
color: white;
border-bottom: white 1px solid;
}
main {
padding: 5%;
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
border-bottom: white 1px solid;
}
.grid-item:hover {
box-shadow: grey 0 5px 8px, grey 0 -5px 8px, grey 5px 0 8px, grey -5px 0 8px;
}
.grid-item img {
display: block;
width: 100%;
}
.grid-item footer {
padding: 5px;
color: #333333;
background-color: #E6E6E6;
}
.footer-city {
margin-bottom: .6em;
font-weight: 800;
font-size: 2em;
}
.footer-author-date {
font-weight: 500;
font-size: 1.125em;
}
<header>
<h1 id="save-cities">
Check this out:
</h1>
</header>
<main>
<article class="grid-item" id="grid-item0">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item1">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item2">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item3">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item4">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item5">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item6">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item7">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
</main>
Related
Im new to code,
I gave the image element(the bee), position: absolute and bottom: 0px, in order to make the element stick to the bottom of the body i.e. the bottom of the page. However, if I dont give the body position: relative, it doesnt work! Based on what I learnt, if there is no any parent that has position that is not static it automatically set itself in relation to the body, so it doesnt work in that case?
HTML
<body>
<img src="https://media.npr.org/assets/img/2018/06/07/gettyimages-200415242-001_slide-d26f3af782b697f15ceebe2f7c380c0e545dd47b.jpg" alt="" class="test-bee">
<div class="container">
<div class="main">
<div class="info">
<h1>10,000+ of our users love our products.</h1>
<p>We only provide great products combined with excellent customer service.
See what our satisfied customers are saying about our services.</p>
</div>
<div class="rates">
<div class="rate-container">
<div class="star-container">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
</div>
<p class="review">Rated 5 Stars in Reviews</p>
</div>
<div class="rate-container">
<div class="star-container">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
</div>
<p class="review">Rated 5 Stars in Report Guru</p>
</div>
<div class="rate-container">
<div class="star-container">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
</div>
<p class="review">Rated 5 Stars in BestTech</p>
</div>
</div>
</div>
<section class="testemonies">
<div class="testemony-card">
<div class="user-info">
<div class="img-container">
<img src="./images/image-colton.jpg" alt="">
</div>
<div class="user-name-status">
<p class="user-name">colton smith </p>
<p class="status"><span>verified buyer</span></p>
</div>
</div>
<p class="testimony">"We needed the same printed design as the one we had ordered a week prior.
Not only did they find the original order, but we also received it in time.
Excellent!"</p>
</div>
<div class="testemony-card">
<div class="user-info">
<div class="img-container">
<img src="./images/image-irene.jpg" alt="">
</div>
<div class="user-name-status">
<p class="user-name">irene roberts </p>
<p class="status"><span>verified buyer</span></p>
</div>
</div>
<p class="testimony">
"Customer service is always excellent and very quick turn around. Completely
delighted with the simplicity of the purchase and the speed of delivery."</p>
</div>
<div class="testemony-card">
<div class="user-info">
<div class="img-container">
<img src="./images/image-anne.jpg" alt="">
</div>
<div class="user-name-status">
<p class="user-name">anne wallace </p>
<p class="status"><span>verified buyer</span></p>
</div>
</div>
<p class="testimony">
"Put an order with this company and can only praise them for the very high
standard. Will definitely use them again and recommend them to everyone!"</p>
</div>
</section>
</div>
</body>
CSS
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
:root {
--Very-Dark-Magenta: hsl(300, 43%, 22%);
--Soft-Pink: hsl(333, 80%, 67%);
--Dark-Grayish-Magenta: hsl(303, 10%, 53%);
--Light-Grayish-Magenta: hsl(300, 24%, 96%);
--White: hsl(0, 0%, 100%);
}
body {
width: 100%;
min-height: 100vh;
font-family: 'League Spartan', sans-serif;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
/* border: 5px solid red; */
padding: 1em;
position: relative; /*why do i need this relative? the bottom image should stick to the bottom by default cause the body is the first one that had position relative, but without it it doesnt stick*/
}
.pattern {
display: none;
}
.test-bee {
width: 200px;
position: absolute;
bottom: 0px;
}
.bottom-mobile, .top-mobile {
display: block;
position: absolute;
}
.top-mobile {
top:0px;
}
.bottom-mobile {
bottom: 0px;
}
.container {
height: 100%;
/* border: 5px solid green; */
margin: 3em 0px;
}
.main {
text-align: center;
margin-bottom: 3em;
}
.info h1 {
margin: 0px auto;
line-height: 0.8em;
margin-bottom: 1em;
margin: 1em 2em;
color: var(--Very-Dark-Magenta)
}
.info {
line-height: 1.3em;
margin-bottom: 2.5em;
}
.rate-container {
background-color: var(--Light-Grayish-Magenta);
padding: 1em 2em;
margin-bottom: 1em;
border-radius: 0.4em;
display: flex;
flex-direction: column;
gap: 0.5em;
color: var(--Very-Dark-Magenta);
font-weight: bold;
}
.testemonies {
display: flex;
flex-direction: column;
gap: 1em;
}
.testemony-card {
background-color: var(--Very-Dark-Magenta);
border-radius: 0.4em;
color: white;
padding: 2em;
line-height: 1.2em;
}
.img-container {
width: 30px;
height: 30px;
border-radius: 50px;
overflow: hidden;
}
.img-container img {
height: 100%;
width: 100%;
}
.user-info {
display: flex;
align-items: center;
gap: 1em;
text-transform: capitalize;
margin-bottom: 1em;
}
.user-name-status p span{
color:var(--Soft-Pink)
}
I fix it by adding the body position: relative, but it should go like that
With a colleague of mine, we wanted to run a behavioural experiment that involve a fake purchase of virtual goods on a shop webpage. We designed the experiment on OTree (so on Python), but we needed Django and especially some html/css code to correctly place the images and texts on the webpage.
We managed to place the images and text as we wanted, to get something like that (the blue squares are just placeholders for the images):
The problem is that as soon as we change the window size, all the images and text just move on their own.
Here's a part of the code (not including everything because for now, we're just trying to get first the text in place and to understand the logic of it).
Here's the CSS:
<style>
body {
background-image: url('https://i.imgur.com/lVtlHWx.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
and the HTML:
<div style="top: 99px; left: 99px;position: absolute; z-index: 1;visibility: visible;">
<h1 style="position: relative; color: #f0f0f0; font-family: Papyrus,monospace;">Welcome to the shop</h1>
<h3 style="position: relative;color: #f0f0f0; font-family: Papyrus,monospace;">Round 1/10</h3>
<p style="position: relative;top:9.5cm; left:6.5cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">5 Rubis</p>
<p style="position: relative;top:9.5cm; left:18cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">15 Rubis</p>
<p style="position: relative;top:9.5cm; left:29.5cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">25 Rubis</p>
<p style="position: relative;top:9.5cm; left:41cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">50 Rubis</p>
<p style="position: relative;top:16cm; left:6.5cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">5 Rubis</p>
<p style="position: relative;top:9.5cm; left:18cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">15 Rubis</p>
<p style="position: relative;top:9.5cm; left:29.5cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">25 Rubis</p>
<p style="position: relative;top:9.5cm; left:41cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">50 Rubis</p>
We're complete beginners in HTML/CSS and I think we bite more than we could chew. I followed and tried some answers but nothing really helped to resize every element with respect to the window size. Perhaps it is due to positioning the text? I still struggle to really understand how css places elements when their position are absolute or relative. We are in dire need of help on this matter, and would be immensely grateful if someone could solve our issue.
This is a typical case where using a table or better, CSS grid positioning would save you a lot of headaches.
Positioning according to measurements on your background image gives the following:
:root {
--display-scale: .5;
}
body {
padding: 10px;
background: black;
overflow: hidden; /* disable scrolling */
}
.wrapper {
transform: scale(var(--display-scale));
-webkit-transform: scale(var(--display-scale));
transform-origin: 0 0;
width: 1884px;
height: 1076px;
background: url('https://i.imgur.com/lVtlHWx.png') no-repeat;
position: relative;
font-family: Papyrus, monospace;
color: #f0f0f0;
}
.wrapper * {
box-sizing: border-box;
}
.wrapper h1 {
position: absolute;
padding: 0;
top: 10px;
left: 10px;
font-size: 48px;
}
.wrapper h3 {
position: absolute;
padding: 0;
top: 10px;
right: 10px;
font-size: 36px;
}
.wrapper .wallet {
position: absolute;
top: 42px;
height: 46px;
left: 720px;
right: 682px;
font-size: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper .my-grid {
position: absolute;
/*background: #ff000055;*/
top: 228px;
left: 110px;
right: 82px;
bottom: 82px;
padding: 0;
column-gap: 38px;
display: grid;
grid-template-columns: 384px 402px 406px 1fr;
grid-template-rows: 196px 50px 202px 50px 202px 50px;
grid-auto-flow: column;
}
.my-grid .prod-image {
/*background: #00ff0055;*/
display: flex;
align-items: center;
justify-content: center;
}
.my-grid img {
display: block;
width: 180px;
height: 130px;
background: #5555ff;
outline: 5px solid black;
}
.my-grid .price {
/*background: #0000ff55;*/
font-size: 24px;
margin 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrapper">
<h1>Welcome to the shop</h1>
<h3>Round 1/10</h3>
<p class="wallet">You have 1000 tokens</p>
<div class="my-grid">
<div class="prod-image"><img class="pic" /></div>
<p class="price">5 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">15 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">25 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">50 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">5 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">15 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">25 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">50 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">50 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">50 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">50 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">50 Rubis</p>
</div>
</div>
Use the --display-scale: .5 variable to adjust display size
You can achieve your desired results with css Grid and Flexbox.
This page content:
<body>
<div id="head">
<h1>Welcome to the shop</h1>
<h3>Round 1/10</h3>
</div>
<div id="labels_container">
<div class="item"><p class="label">5 Rubis</p></div>
<div class="item"><p class="label">15 Rubis</p></div>
<div class="item"><p class="label">25 Rubis</p></div>
<div class="item"><p class="label">50 Rubis</p></div>
<div class="item"><p class="label">5 Rubis</p></div>
<div class="item"><p class="label">15 Rubis</p></div>
<div class="item"><p class="label">25 Rubis</p></div>
<div class="item"><p class="label">50 Rubis</p></div>
<div class="item"><p class="label">5 Rubis</p></div>
<div class="item"><p class="label">15 Rubis</p></div>
<div class="item"><p class="label">25 Rubis</p></div>
<div class="item"><p class="label">50 Rubis</p></div>
</div>
</body>
With this css styling:
body {
background-image: url('./lVtlHWx.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
display: grid;
grid-template-rows: [gstart]1fr[gmid] 5fr[gend];
height: 100vh;
width: 100vw;
}
#head {
grid-row: gstart / gmid;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#head * {
margin: 0;
}
#labels_container {
grid-row: gmid / gend;
margin-top: 3vh;
margin-left: 5vw;
margin-right: 7vw;
margin-bottom: 9.5vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
column-gap: 2.5%;
}
.item .label {
margin: 0;
margin-bottom: 1vh;
}
* {
color: #f0f0f0;
font-family: Papyrus, monospace;
}
h1, h3 {
position: relative;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.label {
font-size: 25px;
}
should do what you want.
Note: You might also find it beneficial to make the interface a div in your page with a constant aspect ratio, because you have an image as the backdrop for the entire interface. Having this image deform makes styling the page awkward. That being said, the styles above should work with your current setup.
I couldn't resist, here is what you should really do: abandon your backdrop that constrains layout, and use a real HTML layout instead, with textures to help achieving the effect you want.
This snippet should be viewed in full page mode
:root {
--iron-texture: url('https://www.outworldz.com/SeamlessTextures/master/Metal/iron_diffuse.png');
--wood-texture: url('https://images.designtrends.com/wp-content/uploads/2015/12/22092207/Seamless-Wooden-Floor-Texture.jpg?width=600');
}
html { padding: 0; margin: 0; height: 100%;}
body {
box-sizing: border-box;
padding: 1rem;
margin: 0;
min-height: 100%;
background: black;
color: white;
font-family: Papyrus, monospace;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.shop {
box-sizing: border-box;
width: 100%;
max-width: 1200px;
background: var(--wood-texture);
background-size: 30%;
color: #ccc;
padding: 1rem;
}
.shop header {
position: relative;
display: flex;
flex-direction: column;
gap: 1em;
}
.shop h1,
.shop p {
padding: 0;
margin: 0;
}
.shop h1 {
font-size: 32px;
}
.shop .round {
position: absolute;
top: 0;
right: 0;
font-size: 28px;
}
.iron-style {
background: var(--iron-texture);
border: 4px solid #1a1a1a;
border-top-color: #2a2a2a;
border-right-color: #2a2a2a;
}
.shop .wallet {
font-size: 20px;
font-weight: bold;
box-sizing: border-box;
width: 20em;
align-self: center;
text-align: center;
padding: .5em;
border-radius: 1.5em;
}
.shop main {
margin-top: 1rem;
padding-bottom: 1rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem 1rem;
border: 1rem solid #222;
border-image: var(--iron-texture);
border-image-repeat: round;
border-image-slice: 20;
box-shadow: inset -3px 3px 3px #111,
inset 3px -3px 5px #333;
}
.product {
display: flex;
flex-direction: column;
}
.pic-layout {
height: 100px;
min-width: 150px;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.pic-layout img {
max-width: 150px;
max-height: 100px;
background: #aaf;
outline: 5px solid #333;
}
.price {
width: 6em;
padding: .3em 1em;
border-radius: .5em;
align-self: center;
text-align: center;
}
#media screen and (max-width: 1000px) {
.shop main {
grid-template-columns: repeat(3, 1fr);
}
}
#media screen and (max-width: 700px) {
.shop main {
grid-template-columns: repeat(2, 1fr);
}
.shop .round {
position: static;
align-self: flex-end;
}
}
<section class="shop">
<header>
<h1>Welcome to the Shop</h1>
<p class="round">Round 1/10</p>
<p class="wallet iron-style">You have 1000 tokens</p>
</header>
<main>
<div class="product" id="product-1">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods1/150/100" />
</div>
<div class="price iron-style">5 Rubis</div>
</div>
<div class="product" id="product-2">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods2/150/100" />
</div>
<div class="price iron-style">25 Rubis</div>
</div>
<div class="product" id="product-3">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods3/150/100" />
</div>
<div class="price iron-style">15 Rubis</div>
</div>
<div class="product" id="product-4">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods4/150/100" />
</div>
<div class="price iron-style">42 Rubis</div>
</div>
<div class="product" id="product-5">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods5/150/100" />
</div>
<div class="price iron-style">120 Rubis</div>
</div>
<div class="product" id="product-6">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods6/150/100" />
</div>
<div class="price iron-style">33 Rubis</div>
</div>
<div class="product" id="product-7">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods7/150/100" />
</div>
<div class="price iron-style">6 Rubis</div>
</div>
<div class="product" id="product-8">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods8/150/100" />
</div>
<div class="price iron-style">44 Rubis</div>
</div>
<div class="product" id="product-9">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods9/150/100" />
</div>
<div class="price iron-style">99 Rubis</div>
</div>
<div class="product" id="product-10">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods10/150/100" />
</div>
<div class="price iron-style">1 Rubis</div>
</div>
<div class="product" id="product-11">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods11/150/100" />
</div>
<div class="price iron-style">23 Rubis</div>
</div>
<div class="product" id="product-12">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods12/150/100" />
</div>
<div class="price iron-style">16 Rubis</div>
</div>
</main>
</section>
This time I structured the shop with one wrapper div per product, but I could have avoided that using the same kind of grid as in my previous answer.
There are no vertical separators as CSS grid does not allow for inner borders (yet). If this is a requirement, the <main> element should be replaced with a <table>, which allows for all kinds of borders.
grid has the advantage of offering responsive layout using #media queries. That's why you can see all products on only 2 columns in the sample above, unless you enlarge it to full page.
I have added 9 cards to the website I'm making and I'm having two issues.
(1) How do I center the 9 cards? As it is more to the left and not centered to the screen.
(2) How do I remove the scroll bar? It seems like the spacing between the top and bottom cards and also below the bottom cards is a lot therefore its moving down and has a scroll bar.
Website Image
<!DOCTYPE html>
<html>
<head>
<title>Discover | Sweeties</title>
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
<style>
.navigation{
padding-top:30px;
padding-bottom:30px;
position:absolute;
top:0;
width:100%;
z-index:1001;
}
.navbar-right{
float:right;
padding-right:10%;
}
.navbar-right a{
text-decoration:none;
padding:10px;
color: #FFFFFF;
font-family:Calibri;
font-weight:900;
font-size: 25px;
}
.navbar-right a:hover{
text-decoration:underline;
}
.navbar-logo{
padding-left:10%;
font-family:Calibri;
font-size:30px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
.video-container {
z-index: -100;
width:100%;
height:75%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
#video-bg{
width:100%;
}
.portfolio-section{
margin-top:50%;
}
.tagline-left{
float:left;
width:50%;
text-align:center;
}
.tagline-right{
float:right;
width:50%;
text-align:center;
}
.tagline-video{
width:75%;
}
.tagline-right-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:17%;
font-family:Calibri;
color:#FFFFFF;
width:290px;
font-size:40px;
}
.tagline-left-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:11%;
font-family:Calibri;
color:#fff;
width:375px;
font-size:40px;
}
</style>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0,0,0,0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
</style>
</head>
<body>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="Videos/beach1.mp4" type="video/mp4">
</video>
</div>
</body>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Calibri;
}
.main{
margin: 3%;
}
.card{
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img{
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title{
text-align: center;
padding: 20px;
}
h1{
font-size: 40px;
}
h2{
font-size: 22px;
}
.des{
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button{
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding:10px;
}
button:hover{
background-color: black;
color: white;
transition: .5s;
cursor: pointer;
}
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.20);
}
.card:hover img {
transform: scale(1);
}
</style>
<body>
<div class="main">
<div class="card">
<div class="image">
<img src="Images/rakiraki.jpg">
</div>
<div class="title">
<h1>
Rakiraki</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Lautoka.jpg">
</div>
<div class="title">
<h1>
Lautoka</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/nadi.jpg">
</div>
<div class="title">
<h1>
Nadi </h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/sigatoka.jpg">
</div>
<div class="title">
<h1>
Sigatoka</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2 >
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/ph.jpg">
</div>
<div class="title">
<h1>
Pacific Harbour</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/suva.jpg">
</div>
<div class="title">
<h1>
Suva</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Labasa.jpg">
</div>
<div class="title">
<h1>
Labasa</h1>
</div>
<div class="des">
<h2> KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/savusavu.jpg">
</div>
<div class="title">
<h1>
Savusavu</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The best approach that I would suggest is flex.
I have added some custom style to yoy existing code just to make it fine in flex.
Here is my additional css added.
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
Your working fiddle.
.navigation {
padding-top: 30px;
padding-bottom: 30px;
/* position: absolute;
top: 0; */
width: 100%;
z-index: 1001;
}
.navbar-right {
float: right;
padding-right: 10%;
}
.navbar-right a {
text-decoration: none;
padding: 10px;
color: #ffffff;
font-family: Calibri;
font-weight: 900;
font-size: 25px;
}
.navbar-right a:hover {
text-decoration: underline;
}
.navbar-logo {
padding-left: 10%;
font-family: Calibri;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
#video-bg {
width: 100%;
}
.portfolio-section {
margin-top: 50%;
}
.tagline-left {
float: left;
width: 50%;
text-align: center;
}
.tagline-right {
float: right;
width: 50%;
text-align: center;
}
.tagline-video {
width: 75%;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Calibri;
}
.main {
/* Commented */
/* margin: 3%; */
}
.card {
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img {
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title {
text-align: center;
padding: 20px;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 22px;
}
.des {
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button {
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding: 10px;
}
button:hover {
background-color: black;
color: white;
transition: 0.5s;
cursor: pointer;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.2);
}
.card:hover img {
transform: scale(1);
}
/* Custom styles */
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
body {
background: cadetblue;
}
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
</div>
</header>
<div class="background-wrap">
<video
id="video-bg-elem"
preload="auto"
autoplay="true"
loop="loop"
muted="muted"
>
<source src="https://youtu.be/ujKVJcwbpRo" type="video/mp4" />
</video>
</div>
<div class="main">
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Rakiraki
</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button
onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'"
>
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Lautoka
</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Nadi
</h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Sigatoka
</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Pacific Harbour
</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Suva
</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Labasa
</h1>
</div>
<div class="des">
<h2>KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Savusavu
</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
</div>
Whenever I'm trying to change .tea to display: block; all the images change their position from being horizontal, to being vertical
How to position it the correct way so the images keep being horizontally aligned and the text will be underneath
.tea {
display: inline-flex;
margin-left: 225px;
padding: 20px;
justify-content: center;
}
.tea h4 {
display: inline-block;
position: relative;
text-align: center;
}
.tea2 {
display: inline-flex;
margin-left: 385px;
}
.tea img {
width: 300px;
height: 200px;
padding: 25px;
border-radius: 15px;
}
.tea2 img {
width: 300px;
height: 200px;
padding: 30px;
}
<div class="tea">
<img class="1" src="https://via.placeholder.com/150">
<h4>Myrtle Ave</h4>
<img class="2" src="https://via.placeholder.com/150">
<h4>Spiced rum</h4>
<img class="3" src="https://via.placeholder.com/150">
<h4>Berry Blitz</h4>
</div>
<div class="tea2">
<img class="1" src="https://via.placeholder.com/150">
<img class="2" src="https://via.placeholder.com/150">
</div>
You should do it like this
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#gallery {
display: flex;
flex-wrap: wrap;
}
#gallery .image-container {
width: 25%;
background-color: lightgreen;
border-radius: 5px;
padding: 5px;
box-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
}
#gallery img {
width: 100%;
}
#gallery .title {
font: bold 24px monospace;
text-align: center;
color: white;
margin: 2%;
}
<div id="gallery">
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 1</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 2</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 3</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 4</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 5</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 6</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 7</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 8</p>
</div>
</div>
You need to change you HTML to support what you want. Use a container wrapper around the image and image text.
Example: https://jsfiddle.net/Lqupmf5s/
<div class="tea">
<div class="img-container">
<img class="1" src="32131">
<h4>Myrtle Ave</h4>
</div>
<div class="img-container">
<img class="2" src="3213">
<h4>Spiced rum</h4>
</div>
<div class="img-container">
<img class="3" src="3213">
<h4>Berry Blitz</h4>
</div>
</div>
.tea {
display: inline-flex;
/* margin-left: 225px; */
padding: 20px;
justify-content: center; }
.tea h4{
display: inline-block;
position: relative;
text-align: center; }
.tea2 {
display: inline-flex;
margin-left: 385px; }
.tea img {
width: 300px;
height: 200px;
/* padding: 25px; */
border-radius: 15px; }
.tea2 img {
width: 300px;
height: 200px;
padding: 30px; }
I'm new to CSS and HTML. My code is below. The footer hides a part from the last card. How do I fix this? I also want to know if this is the right way to implement this design or is there a better way?
my code:
http://plnkr.co/edit/iqoLHe46yxK335MsDknN?p=preview
<!DOCTYPE html>
<html>
<head>
<title>First</title>
<script src="jquery-3.1.1.min.js"></script>
<style>
#container{
width: 100%;
padding: 0 0 0 0%;
font-size: 0;
}
.container-header-menu{
position: fixed;
top: 0;
width: 100%;
height: 10%;
padding: 0 0 0 0%;
font-size: 0;
z-index: 10;
}
body {
margin:0px;
}
.header{
position: relative;
top: 0;
width: 100%;
background-color: #182538;
margin: 0px;
text-align: center;
display:inline-block;
font-size: 1rem;
}
.header-left-text{
display: inline-block;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
line-height: normal;
float: left;
padding-left: 1cm;
font-family: sans-serif;
font-size: 80%;
}
.header-right-text{
display: inline-block;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
line-height: normal;
float: right;
padding-right: 2cm;
font-family: sans-serif;
font-size: 80%;
}
.menu{
display:inline-block;
position:relative;
top: 0;
width: 100%;
background-color: #1F2D48;
margin: 0px;
text-align: center;
font-size: 1rem;
}
.menu-text{
display: inline-block;
color: #FFFFFF;
text-align: left;
vertical-align: middle;
line-height: normal;
float: right;
padding-right: 2cm;
font-family: sans-serif;
}
.menu-item{
width:13%;
float:left;
padding-right: 12px;
}
.card-list{
position: relative;
top: 100px;
width:13%;
height:83%;
float:left;
padding-right: 12px;
overflow-y: auto;
z-index: 5;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 100%;
margin: 5px;
background-color: #F2F2F2;
z-index: 5;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.card-header{
background-color: #F2F2F2;
}
.card-container {
background-color: #FFFFFF;
width: 100%;
position: relative;
margin: 0px;
text-align: center;
display:inline-block;
font-size: 1rem;
}
.card-container-header {
width: 100%;
position: relative;
margin: 0px;
text-align: center;
display:inline-block;
font-size: 1rem;
}
.footer{
position: fixed;
bottom: 0;
margin: 0px;
width: 100%;
height: 6%;
padding: 0 0 0 0%;
z-index: 100;
background-color: #1F2D48;
text-align: center;
}
.footer-left-text{
color: #FFFFFF;
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: normal;
float: left;
padding-left: 1cm;
font-family: sans-serif;
font-size: 80%;
}
.footer-right-button{
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: normal;
float: right;
font-family: sans-serif;
font-size: 100%;
background-color: #FFFFFF; /* Green */
border: none;
color: #1F2D48;
padding: 8px 32px;
border-radius: 8px;
margin: 4px;
border: 2px solid #1F2D48;
}
</style>
</head>
<body>
<div id="container">
<!-- header and menu bar container -->
<div class="container-header-menu">
<!-- header -->
<div class="header">
<p class="header-left-text"><strong>Lead Tracking:</strong> John Smith</p>
<p class="header-right-text">Monday, November 19, 2016</p>
</div>
<!-- menubar -->
<div class="menu">
<div class ="menu-item">
<p class="menu-text">Mapping</p>
</div>
<div class ="menu-item">
<p class="menu-text">Geology</p>
</div>
<div class ="menu-item">
<p class="menu-text">Engineering</p>
</div>
<div class ="menu-item">
<p class="menu-text">Negotiating</p>
</div>
<div class ="menu-item">
<p class="menu-text">Deal</p>
</div>
<div class ="menu-item">
<p class="menu-text">Rejected</p>
</div>
<div class ="menu-item">
<p class="menu-text">Pass</p>
</div>
</div>
</div>
<!-- card list for mapping-->
<div class="card-list">
<div class="card">
<div class="card-container-header">
<h1 style="color:red; text-align:left;"><b>74</b></h1>
<h3 style="text-align:left;"><b>#1213-2324</b></h3>
</div>
<div class="card-container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<hr>
<div class="card">
<div class="card-container-header">
<h1 style="color:red; text-align:left;"><b>74</b></h1>
<h3 style="text-align:left;"><b>#1213-2324</b></h3>
</div>
<div class="card-container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<hr>
<div class="card">
<div class="card-container-header">
<h1 style="color:red; text-align:left;"><b>74</b></h1>
<h3 style="text-align:left;"><b>#1213-2324</b></h3>
</div>
<div class="card-container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<hr>
<div class="card">
<div class="card-container-header">
<h1 style="color:red; text-align:left;"><b>74</b></h1>
<h3 style="text-align:left;"><b>#1213-2324</b></h3>
</div>
<div class="card-container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<hr>
</div>
<!-- card list for engineering-->
<div class="card-list">
<div class="card">
<div class="card-container-header">
<h1 style="color:orange; text-align:left;"><b>74</b></h1>
<h3 style="text-align:left;"><b>#1213-2324</b></h3>
</div>
<div class="card-container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<hr>
<div class="card">
<div class="card-container-header">
<h1 style="color:red; text-align:left;"><b>74</b></h1>
<h3 style="text-align:left;"><b>#1213-2324</b></h3>
</div>
<div class="card-container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<hr>
<div class="card">
<div class="card-container-header">
<h1 style="color:red; text-align:left;"><b>74</b></h1>
<h3 style="text-align:left;"><b>#1213-2324</b></h3>
</div>
<div class="card-container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
</div>
</div>
<div class="footer">
<p class="footer-left-text"><strong>Footer</strong></p>
<button type="button" class="footer-right-button" onclick="alert('Hello world!')">status</button>
<button type="button" class="footer-right-button" onclick="alert('Hello world!')">map</button>
<button type="button" class="footer-right-button" onclick="alert('Hello world!')">details</button>
</div>
</body>
</html>
Pastie Link
You can fix it by adding margin-bottom to class .card-list and it must be equals to the height of your footer.
so just add margin-bottom:6%;since 6% is the height of your footer.
You can add to your .card-list css;
margin-bottom:100px;
This provides a margin for the bottom of the area, so it doesn't overlap with any other elements.
Hope it helps!
Edit*
Chillers' answer is much better compared to mine, as it compensates for scaling between resolutions and devices.