Attempting to create a footer packed with images but struggling to ensure it looks good on both PCs and mobile devices.
The goal is to align the bronze sponsor kitten to the left, and supporter kittens to the right, while keeping the footer at a reasonable height.
Attempts have been made using a grid system, but difficulty arises in controlling the size of the bronze sponsor kitten's photo without causing the images to overflow the container, resulting in the footer expanding beyond the webpage. Flexbox has not been utilized previously.
footer .container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.bronze-container {
max-width: 300px;
}
.sponsor-container {
}
.othersupporter {
background: white;
flex: 1;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.othersupporter > p {
background: white;
color: black;
padding: 1%;
margin: 1px;
flex: 1 0 15%;
}
.row h4 {
padding-left: 2rem;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Title of the document</title>
</head>
<body>
<footer style='background-color:white; width:100%; height:250px'>
<div class='container' style='max-width:1024px; height:250px'>
<div class='bronze-container'>
<div class='row text-center' >
<h4 >Bronze Sponsor </h4>
</div>
<div class='row text-center'>
<img src="https://i.imgur.com/ZA7mKts.png" class="card-img" alt="...">
</div>
</div>
<br class="visible-m"/>
<div class='sponsor-container'>
<div class="row text-center" >
<h4>Supporters</h4>
</div>
<div class="othersupporter">
<p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img " alt="..."></p>
<p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img " alt="..."></p>
<p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img " alt="..."></p>
<p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img " alt="..."></p>
<p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img " alt="..."></p>
<p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img " alt="..."></p>
<p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img " alt="..."></p>
<p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img " alt="..."></p>
<p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img " alt="..."></p>
<p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img " alt="..."></p>
</div>
</div>
</div>
</footer>
</body>
</html>