I'm currently working on creating an image mosaic using a combination of Bootstrap, CSS, and NuxtJS. I have a total of five square images, with the first one needing to be positioned in the center. Specifically, two images should be aligned to the left side and two images to the right side relative to the central image. While I have managed to write some code for this layout, I am facing challenges in making it responsive for both mobile and desktop screens. Additionally, I am struggling to properly center the first image. Any assistance or guidance on how to address these issues would be greatly appreciated. Thank you!
<div class="container d-flex flex-md-column flex-lg-row">
<div class="small-tiles flex-md-row flex-lg-column">
<img
src="../../assets/images/image2.png"
alt="The second image"
/>
<img
src="../../assets/images/image3.png"
alt="The third image"
/>
</div>
<div class="center-tile d-flex flex-column">
<img
src="../../assets/images/image1.png"
alt="The first image"
/>
</div>
<div class="small-tiles flex-md-row flex-lg-column">
<img
src="../../assets/images/image4.png"
alt="The fourth image"
/>
<img
src="../../assets/images/image5.png"
alt="The fifth image"
/>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.container {
width: 100%;
}
.small-tiles {
@media only screen and (max-width: 576) {
width: 100%;
height: 25%;
}
@media only screen and (min-width: 576px) {
width: 25%;
height: 100%;
}
}
.center-tile {
@media only screen and (max-width: 576) {
width: 100%;
height: 50%;
}
@media only screen and (min-width: 576px) {
width: 50%;
height: 100%;
}
}
</style>