I’m struggling to get my images to be responsive. On desktop one image won’t stretch the width of its container. On mobile, I can’t get any of the images to stretch the width of their container or get the flex containers to evenly take up the space of their container. I’ve inserted the CSS code I’m using below. Any help would be greatly appreciated.
Desktop
#features-section {
display: flex;
}
#features-section .images-container {
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
height: 300px;
width: 100%;
}
#features-section .image-container {
display: flex;
justify-content: center;
}
#features-section .image-container img {
object-fit: cover;
width: 100%;
height: 100%;
}
Mobile
#features-section {
display: flex;
height: 400px;
border: 1px green solid;
}
#features-section .images-container {
display: flex;
flex-basis: fit-content;
flex-direction: column;
border: 1px blue solid;
}
#features-section .image-container {
display: flex;
flex-basis: ;
border: 1px red solid;
}
#features-section .image-container img {
}