My code is responsive to many screen resolutions but on an iPad and a Kindle Fire HDX , there is a large whitespace below the footer.
This is how it looks on an iPad
And this how it looks on Kindle Fire HDX
Here is link to my code on codepen
https://codepen.io/stel/pen/BGMXxq
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mess Order</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
<div class='logo-container'>
<img src='mess-order-logo.svg' alt='application logo'>
</div>
<i class="fa fa-bars" id='menu-bar'></i>
</nav>
<div class='time'>
<p>Monday 26 November 2018</p>
<p>TODAY'S OFFERS</p>
</div>
<div id=meal-parent-container>
<div class='meal-container'>
<div class='meal-img'>
<img src='jollof.jpg' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Jollof Rice with Chicken</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='gobe.jpeg' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Fried Plantain with Beans</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='plain-rice.jpg' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Plain Rice with Chicken</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='banku-and-Tilapia.jpg' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Banku With Tilapia</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='Fufu-and-fish.jpg' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Fufu with Light Soup</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
</div>
<div class='special-offers'>
<p>Special Offers</p>
</div>
<footer>
Made with love © 2018
</footer>
</body>
</html>
body,html{
height: 100%;
margin:0;
font-family: 'Merriweather', serif;
}
body{
padding-top: 40px;
background: #136a8a;*/ /* fallback for old browsers
background: -webkit-linear-gradient(to right, #267871, #136a8a); /* Chrome 10-25, Safari 5.1-6*/
background: linear-gradient(to right, #267871, #136a8a);
}
nav{
background-color: #16222A;
position:fixed;
top:0;
left:0;
right:0;
display:flex;
justify-content: space-between;
align-items: center;
font-size:160%;
}
#menu-bar{
padding: 1.2%;
color:#999999;
}
.logo-container{
width:20%;
}
.logo-container img{
max-width:100%;
margin: 0 auto;
}
.meal-container{
background-color:white;
width:90%;
margin:0 auto;
margin-top:1.3em;
padding:0.5em;
display: flex;
justify-content: space-between;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.meal-img{
width:40%;
}
.meal-img img{
max-width:100%;
}
.meal-description{
display: flex;
flex-direction: column;
align-items:flex-start;
justify-content: space-between;
width:50%;
}
#meal-parent-container{
display:flex;
flex-direction: column;
padding-top: 5%;
}
.time, .special-offers{
background-color:white;
width:90%;
margin:0 auto;
margin-top:1.3em;
padding:0.5em;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
text-align: center;
}
.special-offers{
margin-bottom: 1.3em;
}
button{
padding: 0.8em;
color: white;
background: #16222A;
border: 0px;
}
footer{
background: #16222A;
padding:1em;
text-align: center;
color: white;
font-size: 120%;
}
#media screen and (min-width:410px) {
.time{
margin-top:1.5em;
}
.meal-description{
padding:0.7em;
}
.logo-container{
width:18%;
}
}
#media screen and (min-width:430px) {
.time{
margin-top:1.8em;
}
.meal-description{
padding:1em;
}
.logo-container{
width:16%;
}
}
#media screen and (min-width:500px) {
.time{
margin-top:2.3em;
width:70%;
}
.meal-container{
width:80%;
}
.meal-img{
max-width: 37%;
}
.meal-description{
padding:1.2em;
}
.special-offers{
width: 80%;
}
.logo-container{
width:16%;
}
}
#media screen and (min-width:600px) {
#meal-parent-container{
flex-direction: row;
flex-wrap: wrap;
}
.meal-container{
width:45%;
}
.time{
margin-top:2.6em;
}
.logo-container{
width:12%;
}
}
#media screen and (min-width:800px) {
.time{
margin-top:2.9em;
}
.logo-container{
width:10%;
}
}
#media screen and (min-width:900px) {
.time{
width:60%;
}
.special-offers{
width: 70%;
}
.logo-container{
width:8%;
}
}
#media screen and (min-width:1000px) {
.time{
width:50%;
}
.special-offers{
width: 60%;
}
.logo-container{
width:6%;
}
}
What could be causing this problem?
Your content is just not enough to fill the whole viewport. You could position your footer absolutely. Or give a min-height to your content. Or use flexbox to let your content area grow.
Here a pen to play with a flexbox solution: https://codepen.io/Sixl/pen/zMbYxL
There is a flex-grow on a new wrapper main for your content.
body,
html {
height: 100%;
margin: 0;
font-family: 'Merriweather', serif;
}
body {
background: #136a8a;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #267871, #136a8a); /* Chrome 10-25, Safari 5.1-6*/
background: linear-gradient(to right, #267871, #136a8a);
}
.container {
display: flex;
flex-flow: column wrap;
height: 100vh;
}
main {
flex-grow: 1;
padding-top: 40px
}
nav {
background-color: #16222A;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 160%;
}
#menu-bar {
padding: 1.2%;
color: #999999;
}
.logo-container {
width: 20%;
}
.logo-container img {
max-width: 100%;
margin: 0 auto;
}
.meal-container {
background-color: white;
width: 90%;
margin: 0 auto;
margin-top: 1.3em;
padding: 0.5em;
display: flex;
justify-content: space-between;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.meal-img {
width: 40%;
}
.meal-img img {
max-width: 100%;
}
.meal-description {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
width: 50%;
}
#meal-parent-container {
display: flex;
flex-direction: column;
padding-top: 5%;
}
.time,
.special-offers {
background-color: white;
width: 90%;
margin: 0 auto;
margin-top: 1.3em;
padding: 0.5em;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
text-align: center;
}
.special-offers {
margin-bottom: 1.3em;
}
button {
padding: 0.8em;
color: white;
background: #16222A;
border: 0px;
}
footer {
background: #16222A;
padding: 1em;
text-align: center;
color: white;
font-size: 120%;
}
#media screen and (min-width:410px) {
.time {
margin-top: 1.5em;
}
.meal-description {
padding: 0.7em;
}
.logo-container {
width: 18%;
}
}
#media screen and (min-width:430px) {
.time {
margin-top: 1.8em;
}
.meal-description {
padding: 1em;
}
.logo-container {
width: 16%;
}
}
#media screen and (min-width:500px) {
.time {
margin-top: 2.3em;
width: 70%;
}
.meal-container {
width: 80%;
}
.meal-img {
max-width: 37%;
}
.meal-description {
padding: 1.2em;
}
.special-offers {
width: 80%;
}
.logo-container {
width: 16%;
}
}
#media screen and (min-width:600px) {
#meal-parent-container {
flex-direction: row;
flex-wrap: wrap;
}
.meal-container {
width: 45%;
}
.time {
margin-top: 2.6em;
}
.logo-container {
width: 12%;
}
}
#media screen and (min-width:800px) {
.time {
margin-top: 2.9em;
}
.logo-container {
width: 10%;
}
}
#media screen and (min-width:900px) {
.time {
width: 60%;
}
.special-offers {
width: 70%;
}
.logo-container {
width: 8%;
}
}
#media screen and (min-width:1000px) {
.time {
width: 50%;
}
.special-offers {
width: 60%;
}
.logo-container {
width: 6%;
}
}
<div class="container">
<nav>
<div class='logo-container'>
<img src='https://image.ibb.co/iMNFxy/noknoknok.png' alt='application logo'>
</div>
<i class="fa fa-bars" id='menu-bar'></i>
</nav>
<main>
<div class='time'>
<p>Monday 26 November 2018</p>
<p>TODAY'S OFFERS</p>
</div>
<div id=meal-parent-container>
<div class='meal-container'>
<div class='meal-img'>
<img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Jollof Rice with Chicken</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Fried Plantain with Beans</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Plain Rice with Chicken</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Banku With Tilapia</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Fufu with Light Soup</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
</div>
<div class='special-offers'>
<p>Special Offers</p>
</div>
</main>
<footer>
Made with love © 2018
</footer>
</div>
That is mainly because the content of the page does occupy all of the view space of the screen.
If you want the footer to stick to the bottom, you can add a fixed positioning to it in your css:
footer {
background: #16222A;
padding:1em;
text-align: center;
color: white;
font-size: 120%;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
UPDATE
To offset the content so as to avoid it being covered by the footer, you can add the page content inside a container div a padding to the bottom of the container element:
<div class="container>
...
<!-- Your page content -->
</div>
And in your CSS File:
,container {
width: 100%;
height: 100%;
padding-bottom: 60px; /* Adjust the value to match the height of the footer */
}
Related
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%;
}
My issue:
I'm making somewhat of a Zillow clone. I need the page to not expand beyond 100% of the viewport height however, I'm making a section with the intentions of having the overflow property set to scroll. When I do this, the section expands beyond the viewport height and leaves a large whitespace at the bottom of my page. I can adjust the height to fill up to 100vh however, if I adjust the screen vertically the div with the scroll overflow doesn't adjust to the viewport height. Thanks for any and all help!
Here's a screenshot of my issue:
The circled section is the section that I need the overflow to scroll:
This is my HTML for the entire 'popup' portion:
<div class="home__popup--backdrop">
<div class="home__popup--container">
<div class="home__popup--left">
<div class="home__popup--img--container">
<div class="home__popup--img--main--container">
<img src="./src/img/home-0.jpg" alt="home-0" class="home__popup--img--main">
</div>
<div class="home__popup--img--sub--container">
<img src="./src/img/home-1.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-2.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-3.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-4.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-5.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-0.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-1.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-2.jpg" alt="home-0" class="home__popup--img--sub">
</div>
</div>
</div>
<div class="home__popup--right">
<div class="home__popup--header--container">
<div class="home__popup--logo--container">
<div class="logo__container--home">
<img src="./src/img/logo__house.svg" alt="logo-homes" class="logo logo__homes logo__homes--small">
</div>
<div class="logo__container--txt">
<img src="./src/img/logo__txt.svg" alt="logo-homes" class="logo logo__homes logo__txt--small">
</div>
</div>
<div class="home__popup--social--container">
<div class="home__popup--social">
<img src="./src/img/like.svg" alt="logo like" class="popup__logo logo__like">
<p>Save</p>
</div>
<div class="home__popup--share">
<div class="home__popup--social">
<img src="./src/img/next.svg" alt="logo next" class="popup__logo logo__next">
<p>Share</p>
</div>
</div>
<div class="home__popup--more">
<div class="home__popup--social">
<img src="./src/img/more.svg" alt="logo more" class="popup__logo logo__more">
<p>More</p>
</div>
</div>
</div>
</div>
<div class="home__popup--details--container">
<div class="home__popup--details">
<p class="home__popup--price">$500,000</p>
<p class="home__popup--beds home__popup--details--home">3 <span>bds</span></p>
<p class="home__popup--baths home__popup--details--home">2 <span>ba</span></p>
<p class="home__popup--sqft home__popup--details--home">2,245 <span>sqft</span></p>
</div>
<div class="home__popup--address--container">
<p class="home__popup--address">
4210 sharman rd<span>, </span>
</p>
<p class="home__popup--city">Madison<span>, </span></p>
<p class="home__popup--state">WI</p>
</div>
<div class="home__popup--btn--container">
<button class="btn__agent">Contact Agent</button>
</div>
</div>
<div class="home__popup--overview--container">
<div class="home__popup--overview--container--links">
<img src="./src/img/001-left-arrow.svg" alt="arrow-left" class = 'arrow-small arrow-small--left'>
<div class="home__popup--overview home__popup--overview--active home__popup--overview--container--links--text--container" data-list-section = 0>
<p class="home__popup--overview--text home__popup--overview--container--links--text">Overview</p>
</div>
<div class="home__popup--facts home__popup--overview--container--links--text--container">
<p class="home__popup--facts--text home__popup--overview--container--links--text">Facts and features</p>
</div>
<div class="home__popup--value home__popup--overview--container--links--text--container">
<p class="home__popup--value--text home__popup--overview--container--links--text">Home value</p>
</div>
<div class="home__popup--history home__popup--overview--container--links--text--container" data-list-section = 1>
<p class="home__popup--history--text home__popup--overview--container--links--text">Price and tax history</p>
</div>
<div class="home__popup--monthly home__popup--overview--container--links--text--container">
<p class="home__popup--monthly--text home__popup--overview--container--links--text">Monthly cost</p>
</div>
<div class="home__popup--rental home__popup--overview--container--links--text--container">
<p class="home__popup--rental--text home__popup--overview--container--links--text">Rental Value</p>
</div>
<div class="home__popup--schools home__popup--overview--container--links--text--container" data-list-section = 2>
<p class="home__popup--schools--text home__popup--overview--container--links--text">Nearby schools</p>
</div>
<div class="home__popup--similar home__popup--overview--container--links--text--container">
<p class="home__popup--similar--text home__popup--overview--container--links--text">Similar homes</p>
</div>
<div class="home__popup--neighborhood home__popup--overview--container--links--text--container">
<p class="home__popup--neighborhood--text home__popup--overview--container--links--text">Neighborhood</p>
</div>
<div class="home__popup--homes-for-you home__popup--overview--container--links--text--container">
<p class="home__popup--homes-for-you--text home__popup--overview--container--links--text">Homes for you</p>
</div>
<img src="./src/img/002-right-arrow.svg" alt="arrow-right" class = 'arrow-small arrow-small--right'>
</div>
<div class="home__popup--scroll">
<div class="home__popup--home--detail--container">
<div class="home__popup--map--container">
<div class="test" id = "home__popup--map"></div>
</div>
<div class="home__popup--text--container">
<div class="home__popup--text--stats">
<P class="home__popup--text--header">Overview</P>
<div class="home__popup--text--user-activity">
<p class="home__popup--text--time">Time on Home Finder  <span> --</span></p>
<p class="home__popup--text--views">Views <span>64</span></p>
<p class="home__popup--text--saves">Saves <span>1</span></p>
</div>
<p class="home__popup--text--description">
No showings until 8/22 OH.....
</p>
<p class="home__popup--text--read-more">Read more</p>
</div>
<p class="home__popup--text--open-house--header">Open House</p>
<p class="home__popup--text--open-house--day">Sun, Aug 22</p>
<p class="home__popup--text--open-house--time">12:00 PM - 2:00 PM</p>
<ul class="home__popup--text--agent--container">
<li class="home__popup--text--agent">Kavita Biyani</li>
<li class="home__popup--text--agent">Nik Tantardini</li>
<li class="home__popup--text--agent">First Weber INC</li>
<li class="home__popup--text--agent">Lena Oberwetter</li>
<li class="home__popup--text--agent">Prince Michael</li>
</ul>
<div class="home__popup--overview--text">
</div>
<div class="home--popup--overview--specs">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's the HTML for the overflowed portion:
<div class="home__popup--scroll">
<div class="home__popup--home--detail--container">
<div class="home__popup--map--container">
<div class="test" id = "home__popup--map"></div>
</div>
<div class="home__popup--text--container">
<div class="home__popup--text--stats">
<P class="home__popup--text--header">Overview</P>
<div class="home__popup--text--user-activity">
<p class="home__popup--text--time">Time on Home Finder  <span> --</span></p>
<p class="home__popup--text--views">Views <span>64</span></p>
<p class="home__popup--text--saves">Saves <span>1</span></p>
</div>
<p class="home__popup--text--description">
No showings until 8/22 OH. Amazing opportunity ...
</p>
<p class="home__popup--text--read-more">Read more</p>
</div>
<p class="home__popup--text--open-house--header">Open House</p>
<p class="home__popup--text--open-house--day">Sun, Aug 22</p>
<p class="home__popup--text--open-house--time">12:00 PM - 2:00 PM</p>
<ul class="home__popup--text--agent--container">
<li class="home__popup--text--agent">Kavita Biyani</li>
<li class="home__popup--text--agent">Nik Tantardini</li>
<li class="home__popup--text--agent">First Weber INC</li>
<li class="home__popup--text--agent">Lena Oberwetter</li>
<li class="home__popup--text--agent">Prince Michael</li>
</ul>
<div class="home__popup--overview--text">
</div>
<div class="home--popup--overview--specs">
</div>
</div>
</div>
Here is the relevant css:
.home__popup {
&--home--detail--container {
}
&--text {
&--description{
font-size: 1.8rem;
font-weight: 300;
color: $color-grey-text;
line-height: 1.3;
}
&--user-activity{
display: flex;
margin-bottom: 2rem;
font-size: 1.4rem;
color: $color-grey-text;
& span{
color: black;
}
}
&--time{
margin-right: 2rem;
border-right: 1px solid $color-grey-medium;
& span{
font-weight: bold;
margin-right: 2rem;
}
}
&--saves{
margin-left: 2rem;
& span{
font-weight: bold;
}
}
&--views{
margin-right: 2rem;
border-right: 1px solid $color-grey-medium;
& span{
font-weight: bold;
margin-right: 2rem;
}
}
&--header {
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 2rem;
}
&--container {
margin-top: 2rem;
display: flex;
flex-direction: column;
margin-left: 1rem;
}
}
&--btn {
&--container {
margin-top: 1rem;
margin-left: 1rem;
display: flex;
justify-content: space-between;
width: 100%;
position: relative;
}
}
&--address {
&--container {
display: flex;
font-weight: 300;
font-size: 1.6rem;
margin-left: 1rem;
margin-top: 1rem;
}
}
&--baths {
margin-left: 0.5rem;
}
&--beds {
margin-left: 2rem;
}
&--price {
margin-top: 3rem;
font-size: 2.5rem;
font-weight: 500;
margin-left: 1rem;
}
&--social {
cursor: pointer;
&--container {
display: flex;
align-items: center;
width: 45%;
justify-content: space-around;
}
}
&--backdrop {
width: 100vw;
height: 100vh;
z-index: 2999;
position: absolute;
top: 0;
left: 0;
backdrop-filter: blur(2px);
background-color: rgba(0, 0, 0, 0.671);
}
&--container {
position: absolute;
top: 0;
left: 50%;
height: 100vh;
width: 65vw;
background-color: white;
transform: translateX(-50%);
z-index: 3000;
backdrop-filter: blur(2px);
display: flex;
flex-direction: row;
}
&--left {
position: relative;
width: 60%;
overflow-y: scroll;
}
&--right {
width: 40%;
position: relative;
}
&--img {
&--main {
height: auto;
object-fit: cover;
width: 100%;
}
&--sub {
height: 25rem;
object-fit: cover;
width: 49.5%;
margin-bottom: 0.4rem;
&--container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
}
}
&--header {
&--container {
display: flex;
justify-content: space-between;
position: relative;
border-bottom: 1px solid #6060607a;
margin-left: 1rem;
margin-right: 1rem;
}
}
&--logo {
&--container {
display: flex;
transform: translateY(1rem);
}
&__homes {
&--small {
height: 6rem;
width: 7rem;
}
}
}
&--details {
display: flex;
align-items: flex-end;
&--container {
display: flex;
flex-direction: column;
position: relative;
}
&--home {
font-size: 1.6rem;
font-weight: 400;
& span {
border-right: 1px solid $color-grey-text;
padding-right: 0.5rem;
font-weight: 300;
}
}
}
&--sqft {
margin-left: 0.5rem;
& span {
border-right: none;
}
}
&--overview {
color: $color-primary;
border-bottom: 2px solid $color-primary;
&--container {
display: flex;
flex-direction: column;
position: relative;
&--links {
display: flex;
overflow-x: scroll;
font-size: 14px;
font-weight: 300;
height: 5rem;
align-items: center;
margin-top: 2rem;
border-top: 1px solid $color-grey-medium;
border-bottom: 1px solid $color-grey-medium;
margin-left: 0.5rem;
margin-right: 0.5rem;
&::-webkit-scrollbar {
display: none;
}
&--text {
margin-left: 1rem;
margin-right: 1rem;
width: max-content;
&--container {
cursor: pointer;
height: 100%;
display: flex;
align-items: center;
transition: .2s all;
&:hover {
color: $color-primary-light;
}
}
}
}
}
}
}
I was having way too many issues out of pure stubbornness of not wanting to change my css however, I finally gave in and refactored the section as a grid. I'm now able to get it to function properly. Here's what it looks like:
And here's the css for the grid-layout:
&--right {
width: 40%;
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 5rem 20rem 5rem auto;
}
here's the CSS for the updated div containing the scroll bar:
&--scroll{
grid-column: 1/-1;
grid-row: 4/5;
overflow-y: scroll;
overflow-x: hidden;
}
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>
I have some problems laying out my elements. I tried to achieve the following layout in my web application:
I tried to use div´s and style them but it looks like this when I run it
I wanted to create a grid with three container in each row. Also for responsiveness I used flexbox.
Any suggestions how the layout could improve? I think I messed it up a little.
.contacts-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
h1.subheading {
color: red;
}
.contact {
flex: 0 0 32%;
/* don't grow, don't shrink, width */
margin-bottom: 5px;
border: 1px solid #ddd;
}
.contact a {
color: black;
text-decoration: none;
}
.contactInfo {
padding: 1.4em;
float: left;
}
.contactInfo h2 {
margin-top: 0;
margin-bottom: 0.5em;
font-weight: normal;
}
.contactInfo p {
font-size: 95%;
}
.contactInfo .contactName {
float: right;
}
.contactDetails {
float: left;
}
.contactDetails img {
width: 50px;
height: 50px;
}
#contact .contact-buttons {
position: absolute;
bottom: 0;
left: 0;
}
/* Using flexbox with media queries to make the layout responsive*/
#media screen and (min-width: 40em) {
.contacts-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: -1em;
}
.contact-info {
display: flex;
flex: 0 1 calc(50% - 0.5em);
margin-bottom: 1em;
}
}
#media screen and (min-width: 60em) {
.contacts-container {
margin-top: inherit;
}
.contact-info {
flex: 0 1 calc(33% - 1em);
margin-bottom: 2em;
}
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo">
<img :src="getImage(contactImg)" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div>
<img :src="getImage(contactImg)" style="" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
</div>
<div class="contact-buttons">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>
.contacts {
width: 300px;
padding: 40px;
border: 1px solid black;
}
.contact {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.contact .contactInfo {
display: flex;
margin-bottom: 30px;
}
.contact .contactInfo img {}
.contact .contactInfo .contactName {
margin: auto 0;
margin-left: 30px;
}
.contact .contactDetails {
margin-bottom: 30px;
border: 1px solid black;
}
.contact .contactDetails div {
display: flex;
margin: 10px;
}
.contact .contactDetails div p {
margin-left: 30px;
}
.contact .contact-buttons {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo">
<img src="https://via.placeholder.com/150" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
</div>
<div class="contact-buttons">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>
.contact {
margin-bottom: 5px;
border: 1px solid #ddd;
padding: 10px;
}
.contactInfo {
display: flex;
align-items: center;
}
.contactDetails {
border: 1px solid #ddd;
padding: 10px;
}
.contactDetailsRow {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.contactName,
.contactDetailsRowName {
flex: 1;
padding-left: 10px;
}
.contact-buttons {
display: flex;
}
.contact-buttons > button {
flex: 1;
margin: 10px;
}
<div class="contact">
<div class="contactInfo">
<div>
<img src="https://via.placeholder.com/100" />
</div>
<div class="contactName">
<h5>Prename Surname</h5>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
</div>
<div class="contact-buttons">
<button>Add 1</button>
<button>Add 1</button>
</div>
</div>
Been a while but something like this?
:root {
--baseMargin: 1.4em;
--buttonBorderRadius: 0.5em 0.5em 0.5em 0.5em;
--paddingBaseFill: calc(var(--baseMargin) * 2);
}
.contactInfo img {
min-width: 10em;
}
.contacts-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
}
h1.subheading {
color: red;
}
.contact {
flex: 0 1;
display: flex;
flex-direction: column;
/* don't grow, don't shrink, width */
margin-bottom: 5px;
border: 1px solid #ddd;
}
.wrapper {
margin: 0 var(--baseMargin);
}
.contact a {
color: black;
text-decoration: none;
}
.contactInfo {
flex: 1 1;
display: flex;
padding: var(--paddingBaseFill) 0;
}
.contactInfo h2 {
margin-top: 0;
margin-bottom: 0.5em;
font-weight: normal;
}
.contactInfo p {
font-size: 95%;
}
.contactInfo .contactName {
flex: 1 1;
margin-left: var(--baseMargin);
text-align: center;
}
.contactDetails {
flex: 1 1;
padding: 1em;
border: 0.1em solid black;
}
.contactDetails div {
display: flex;
align-items: center;
}
.contactDetails img {
width: 50px;
height: 50px;
padding: 0.5em;
}
.contact-buttons {
flex: 1 1;
display: flex;
justify-content: space-between;
padding: var(--baseMargin) 0;
}
.contact-buttons button {
font-size: 1.2em;
background: #018bff;
border-radius: var(--buttonBorderRadius);
padding: 0.25em;
color: #fff;
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo wrapper">
<img :src="getImage(contactImg)" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails wrapper">
<div>
<img :src="getImage(contactImg)" style="" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
</div>
<div class="contact-buttons wrapper">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>
hello I want to have a "how" when I go over the picture but the heart is positioned elsewhere. where is the mistake?
and the point I don't understand is why does my card width seem to be overflowing?
Because of the overflow I showed in the picture. When I add a card to the 2nd card. The cards are coming upside down.
.card-video {
width: 305px;
display: flex;
flex-direction: column;
}
.card-pic img {
object-fit: cover;
width: 100%;
height: 100%;
max-width: 305px;
max-height: 170px;
}
.card-info-logo {
position: absolute;
right: 5px;
top: -28px;
}
.card-info-logo img {
width: 55px;
border-radius: 50%;
border: 4px solid #5e4b55;
}
.card-info {
position: relative;
background-color: #292828;
height: 90px;
padding: 7px 10px 10px 10px;
display: flex;
flex-direction: column;
}
.card-info-top {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-info .card-info-category {
color: #546e7a;
font-size: 14px;
}
.card-info .card-info-title {
color: #546e7a;
font-size: 14px;
padding-bottom: 5px;
}
.card-info-bottom {
border-top: solid 1px #44393e;
padding-top: 7px;
display: flex;
align-items: center;
line-height: 1;
justify-content: space-between;
}
.card-info .card-info-bottom .views {
color: #546e7a;
font-size: 12px;
}
.card-info .card-info-bottom .date {
color: #546e7a;
font-size: 12px;
}
.card-pic {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.clip-icon {
position: relative;
}
.clip-icon:hover {
background-color: red;
}
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>
.card-video is having flow direction column.
If you try to put the more card like this it will always show in upside down like a stack. Wrap the entire thing in div and provide the flow-direction: row and flex-wrap : wrap to get desired result.
<style>
.box{
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.card-video {
width: 305px;
display: flex;
flex-direction: column;
margin:0.5rem;
}
.card-pic img {
object-fit: cover;
width: 100%;
height: 100%;
max-width: 305px;
max-height: 170px;
}
.card-info-logo {
position: absolute;
right: 5px;
top: -28px;
}
.card-info-logo img {
width: 55px;
border-radius: 50%;
border: 4px solid #5e4b55;
}
.card-info {
position: relative;
background-color: #292828;
height: 90px;
padding: 7px 10px 10px 10px;
display: flex;
flex-direction: column;
}
.card-info-top {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-info .card-info-category {
color: #546e7a;
font-size: 14px;
}
.card-info .card-info-title {
color: #546e7a;
font-size: 14px;
padding-bottom: 5px;
}
.card-info-bottom {
border-top: solid 1px #44393e;
padding-top: 7px;
display: flex;
align-items: center;
line-height: 1;
justify-content: space-between;
}
.card-info .card-info-bottom .views {
color: #546e7a;
font-size: 12px;
}
.card-info .card-info-bottom .date {
color: #546e7a;
font-size: 12px;
}
.card-pic {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.clip-icon {
position: relative;
}
.clip-icon:hover {
background-color: red;
}
</style>
<div class="box">
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>
</box>
The flex-direction needs to be set to row, with flex-wrap:wrap as to format correctly.
The .clip-icon can be set to position:absolute if the parent element has position:relative applied.
You can set the clip-icon to display:none and get it to display on picture hover by adding .card-pic:hover .clip-icon: { display:block; }
I have added a snippet below
.box{
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.card-video {
width: 305px;
display: flex;
flex-direction: column;
margin:0.5rem;
}
.card-pic img {
object-fit: cover;
width: 100%;
height: 100%;
max-width: 305px;
max-height: 170px;
}
.card-info-logo {
position: absolute;
right: 5px;
top: -28px;
}
.card-info-logo img {
width: 55px;
border-radius: 50%;
border: 4px solid #5e4b55;
}
.card-info {
position: relative;
background-color: #292828;
height: 90px;
padding: 7px 10px 10px 10px;
display: flex;
flex-direction: column;
}
.card-info-top {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-info .card-info-category {
color: #546e7a;
font-size: 14px;
}
.card-info .card-info-title {
color: #546e7a;
font-size: 14px;
padding-bottom: 5px;
}
.card-info-bottom {
border-top: solid 1px #44393e;
padding-top: 7px;
display: flex;
align-items: center;
line-height: 1;
justify-content: space-between;
}
.card-info .card-info-bottom .views {
color: #546e7a;
font-size: 12px;
}
.card-info .card-info-bottom .date {
color: #546e7a;
font-size: 12px;
}
.card-pic:hover .clip-icon{
display:block;
}
.card-pic {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
position:relative;
}
.clip-icon a {
position: relative
}
.clip-icon {
position: absolute;
bottom:10px;
left:5px;
width:20px;
height:20px;
background-color:white;
display:none;
}
.clip-icon:hover {
background-color: red;
}
<div class="box">
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>
</box>