When reducing screen size the images overlap the footer instead of pushing it further down the page. Images are all 720x1280. However, on a bigger screen the images fall in correctly.
How can I resolve this? Completely new in HTML and CSS so please bear with me.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<link rel="stylesheet" href="footer.css">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="gallery.css">
</head>
<body>
<header>
<div class="container-md">
<div id="topbar"> <!--Search div-->
<form method="get" class="input-group">
<img src="/icons/search-white.svg" alt="Search">
<input id="search-field" class="form-control" type="text" placeholder="Search">
</form>
<div id="logo">
<img src="/icons/globe-white.svg" alt="Logo">
</div>
<div id="menu">
<nav class="d-none d-md-block">
<a href="destinations_gallery.html">Destinations</a>
<a href="" class="btn btn-light">Sign in</a>
</nav>
<img class="d-md-none" src="/icons/three-bars-white.svg" alt="Menu">
</div>
</div>
<div class="destinations"> <!--images div-->
<div class="destination">
<img alt="Eiffel Tower, Paris" src="/images/destinations/paris.jpg">
<div class="location">
<strong>Paris</strong>
<div class="country">France</div>
</div>
</div>
<div class="destination">
<img alt="Golden Gate Bridge, San Francisco" src="/images/destinations/san-francisco.jpg">
<div class="location">
<strong>San Francisco</strong>
<div class="country">United States</div>
</div>
</div>
<div class="destination">
<img alt="Sydney Opera House, Sydney" src="/images/destinations/sydney.jpg">
<div class="location">
<strong>Sydney</strong>
<div class="country">Australia</div>
</div>
</div>
<div class="destination">
<img alt="Sensō-ji, Tokyo" src="/images/destinations/tokyo.jpg">
<div class="location">
<strong>Tokyo</strong>
<div class="country">Japan</div>
</div>
</div>
<div class="destination">
<img alt="Eiffel Tower, Paris" src="/images/destinations/paris.jpg">
<div class="location">
<strong>Paris</strong>
<div class="country">France</div>
</div>
</div>
<div class="destination">
<img alt="Eiffel Tower, Paris" src="/images/destinations/paris.jpg">
<div class="location">
<strong>Paris</strong>
<div class="country">France</div>
</div>
</div>
<div class="destination">
<img alt="Eiffel Tower, Paris" src="/images/destinations/paris.jpg">
<div class="location">
<strong>Paris</strong>
<div class="country">France</div>
</div>
</div>
<div class="destination">
<img alt="Eiffel Tower, Paris" src="/images/destinations/paris.jpg">
<div class="location">
<strong>Paris</strong>
<div class="country">France</div>
</div>
</div>
<div class="destination">
<img alt="Eiffel Tower, Paris" src="/images/destinations/paris.jpg">
<div class="location">
<strong>Paris</strong>
<div class="country">France</div>
</div>
</div>
<div class="destination">
<img alt="Eiffel Tower, Paris" src="/images/destinations/paris.jpg">
<div class="location">
<strong>Paris</strong>
<div class="country">France</div>
</div>
</div>
<div class="destination">
<img alt="Eiffel Tower, Paris" src="/images/destinations/paris.jpg">
<div class="location">
<strong>Paris</strong>
<div class="country">France</div>
</div>
</div>
<div class="destination">
<img alt="Eiffel Tower, Paris" src="/images/destinations/paris.jpg">
<div class="location">
<strong>Paris</strong>
<div class="country">France</div>
</div>
</div>
</div>
</div>
</header>
<footer>
<div class="container-md">
<div> <!--links div-->
<h3>Links</h3>
<nav>
<a href="">Home</a>
<a href="">Destinations</a>
<a href="">About</a>
<a href="">Contact</a>
</nav>
</div>
<div> <!--newsletter div-->
<h3>Newsletter</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl nec tincidunt dapibus, magna libero fermentum augu. </p>
<form class="input-group">
<input class="form-control" type="email" placeholder="Email">
<button class="btn btn-success" type="submit">
Subscribe
<img src="/icons/arrow-right-white.svg" alt="arrow">
</button>
</form>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
gallery.css:
.destinations {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 10px;
padding: 20px;
}
.destination {
position: relative;
}
#destinations {
padding-top: 60px;
padding-bottom: 60px;
}
.destination .location strong {
font-family: "Dancing Script";
font-size: 2rem;
}
.destination .location .country {
font-family: "Montserrat";
font-size: 14px;
}
.destination .location {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
width: 100%;
color: white;
text-align: center;
}
.destination img {
width: 100%;
height: 180px;
object-fit: cover;
}
@media (min-width: 768px) {
.destinations {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.destinations img {
max-height: none;
}
}
@media (max-width: 767px) {
.destination {
height: auto;
}
.destination img {
max-height: 100%;
width: 100%;
}
}
header.css:
#topbar {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding-top: 20px;
padding-bottom: 20px;
}
#logo {
display: flex;
justify-content: center;
}
#menu {
display: flex;
justify-content: flex-end;
}
#menu nav a {
line-height: 40px;
color: white;
}
header {
background-image: url('/images/header.jpg');
background-size: cover;
background-position: center;
color: white;
height: 100vh;
padding-bottom: 20px;
font-family: "Montserrat", Helvetica, Arial, sans-serif;
}
header > .container-md {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%
}
header h1 {
font-size: 64px;
font-weight: bold;
}
@media (min-width: 768px) {
#menu img {
display: none;
}
}
@media (max-width: 767px) {
#menu nav {
display: none;
}
}
#search-field {
background-color: transparent;
border: none;
}
footer.css:
footer {
background-color: #ffc107;
padding-top: 60px;
padding-bottom: 60px;
}
footer nav a {
display: block;
color: black;
}
@media (min-width: 768px) {
footer > .container-md {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
}
It's because header is set to height:100vh;, meaning it will always be as high as the viewport, but never higher. And since your images are inside header, they will be unable to make header higher even though the images themselves are pushing beyond that.