I'm facing a challenge with displaying a grid of images on my site. The layout I have shows one image on top and three images below it, but I'm struggling to make it responsive. At smaller screen widths, everything looks fine, with the images aligned properly. However, when the screen size increases, the first image either gets distorted or there's a gap on the sides. I've included snippets and jsfiddles below along with my comments for reference.
Attempt One
/* Latest compiled and minified CSS included as External Resource*/
.container{
max-height:200px!important;
}
.row{
padding-bottom:10px;
}
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row imagetiles">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://scontent-sea1-1.cdninstagram.com/vp/f2630ab0809f8f1f942e76620914885e/5C885E3A/t51.2885-15/e35/c0.61.1080.1080/s480x480/44191803_684612728592256_2201772746335609632_n.jpg?ig_cache_key=MTg5MTYwNzQwNTMxODQyMTY0MA%3D%3D.2.c" class="img-responsive">
</div>
</div>
<div class="row imagetiles">
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-4">
<img src="https://scontent-sea1-1.cdninstagram.com/vp/f2630ab0809f8f1f942e76620914885e/5C885E3A/t51.2885-15/e35/c0.61.1080.1080/s480x480/44191803_684612728592256_2201772746335609632_n.jpg?ig_cache_key=MTg5MTYwNzQwNTMxODQyMTY0MA%3D%3D.2.c" class="img-responsive">
</div>
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-4">
<img src="https://scontent-sea1-1.cdninstagram.com/vp/f2630ab0809f8f1f942e76620914885e/5C885E3A/t51.2885-15/e35/c0.61.1080.1080/s480x480/44191803_684612728592256_2201772746335609632_n.jpg?ig_cache_key=MTg5MTYwNzQwNTMxODQyMTY0MA%3D%3D.2.c" class="img-responsive">
</div>
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-4">
<img src="https://scontent-sea1-1.cdninstagram.com/vp/f2630ab0809f8f1f942e76620914885e/5C885E3A/t51.2885-15/e35/c0.61.1080.1080/s480x480/44191803_684612728592256_2201772746335609632_n.jpg?ig_cache_key=MTg5MTYwNzQwNTMxODQyMTY0MA%3D%3D.2.c" class="img-responsive">
</div>
</div>
</div>Attempt Two
/*scares away bad guys*/
* {padding:0;margin:0;}
#dashboard {
display:flex;
/*height: 1024px; as specified in your original pen.
width: 1024px;
*/
min-width:100%;
width: 100vmin;
min-height:100%;
min-height:98vmin; /* (-) offset by 2x AMOUNT*/
height: 100%;
height: 98vmin; /* (-) offset by 2X AMOUNT*/
background-color:purple;/*visual dev*/
}
/*These two rules govern offset needed for whichever construct you choose to use first. In this example, only the .row is active, but if you chose to build the structure using cols (items 1,4,5 in col a, etc.) then the second rule would handle the same offset. Offset is 1x AMOUNT*/
#dashboard >.row{ padding:1vmin 0; }
#dashboard>.col { padding:0 1vmin; }
.row, .col{display:flex;}
.row{
flex-direction: row;
background-color:black;
}
.col{
flex-direction:column;
background-color:green;
}
.f1{flex:1;}
.f2{flex:2;}
.child{
display: flex;
flex:1;
margin: 3px; /* <--- AMOUNT*/
width:auto;
height: 100%;
/*CONTENT: TEXT*/
font-weight: bold;
font-size: 2em;
text-align: center;
color: white;
background-color: grey;
/*FOR DISPLAYING CONTENT CENTERED*/
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
/*UNCOMMENT THIS TO BEAUTIFY COLORS*/
body,#activecontainer,#dashboard,.row,.col{
/* background-color:#293C4A; */
}
img{
max-width: 100%;
max-height:300px;
}
#dashboard{
max-height:300px;
}<div id="dashboard" class="col">
<div class="row f2">
<div class="col f2">
<div class="child"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c67d489394820ab5cf40af652a62e63c/5C5F6209/t51.2885-15/e35/c135.0.810.810/s480x480/43064777_242628609743355_5025062255919095941_n.jpg?ig_cache_key=MTg5MTU2Nzg3NzIzMzE5ODA3OA%3D%3D.2.c"></div>
</div>
</div>
</div>
<div class="row f1">
<div class="child"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c67d489394820ab5cf40af652a62e63c/5C5F6209/t51.2885-15/e35/c135.0.810.810/s480x480/43064777_242628609743355_5025062255919095941_n.jpg?ig_cache_key=MTg5MTU2Nzg3NzIzMzE5ODA3OA%3D%3D.2.c"></div>
<div class="child"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c67d489394820ab5cf40af652a62e63c/5C5F6209/t51.2885-15/e35/c135.0.810.810/s480x480/43064777_242628609743355_5025062255919095941_n.jpg?ig_cache_key=MTg5MTU2Nzg3NzIzMzE5ODA3OA%3D%3D.2.c"></div>
<div class="child"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c67d489394820ab5cf40af652a62e63c/5C5F6209/t51.2885-15/e35/c135.0.810.810/s480x480/43064777_242628609743355_5025062255919095941_n.jpg?ig_cache_key=MTg5MTU2Nzg3NzIzMzE5ODA3OA%3D%3D.2.c"></div>
</div>Jsfiddle
Check out a possible solution here
An ideal fix would involve maintaining the images' ratios and ensuring there's no margin or padding on the sides. Adjusting the spacing between the three images can also enhance the overall look of the layout.