Struggling with making a row of images resize responsively when the viewport changes? Are your images wrapping awkwardly or leaving white space as the screen narrows, requiring users to scroll horizontally to view them? I want my images to resize without wrapping and fill the entire width of the screen border-to-border. Check out this wireframe for reference
New to web design/development and seeking assistance on Stack Overflow for the first time.
Code Used
html, body, .row {
height: 100%;
max-height: 100%;
width: 100%;
}
body {
line-height: 1.75rem !important;
}
.container-fluid {
padding: 0 !important;
margin: 0 !important;
}
.about-imgs-item {
height: 240px;
width: 245px;
display: flex;
object-fit: cover;
justify-content: start;
flex-wrap: nowrap;
}
@media (max-width: 575px) {
.about-imgs-item {
display: none;
}
}<div class="container-fluid dev">
<div class="row about-imgs">
<div class="about-imgs-item">
<img id="about-imgs-1" src="image1.jpg">
</div>
<div class="about-imgs-item">
<img id="about-imgs-2" src="image2.jpg">
</div>
<div class="about-imgs-item">
<img id="about-imgs-3" src="image3.jpg">
</div>
<div class="about-imgs-item">
<img id="about-imgs-4" src="image4.jpg">
</div>
<div class="about-imgs-item">
<img id="about-imgs-5" src="image5.jpg">
</div>
</div>
</div>Attempted solutions:
- Using flex-wrap: nowrap;
- Switching from px to rem for image dimensions
- Implementing media queries for specific screen sizes
- Removing the container
Still learning, so may not have applied these concepts correctly. Appreciate any guidance!