Centering multiple photos in blogpost, theme Roam
Hi all,
I've been struggling to make nice blog posts with our shopify theme (Roam). It doesn't let me add multiple photos next to each other and always creates really big and awkward spaces between the images. I understand it has to do with the HTML code, so I've tried rewriting it and almost got it to work on a laptop screen. Although, now the issue is that it looks ridiculous on a mobile screen instead. I will attach two photos showing how it looks on the laptop currently vs the mobile.
I therefore need help with rewriting this script to make sure the photos adjust accordingly to whatever screen the user is on.
<div class="full-width-image-container">
<div class="image-container"><img src="image_1" alt="description" class="blog-image"> <img src="image_2" alt="description" class="blog-image"> <img src="image_3" alt="description" class="blog-image"></div>
</div>
<style><!--
.full-width-image-container {
width: 100vw;
position: center;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding: 20px 0;
}
.image-container {
display: flex;
justify-content: flex;
align-items: center;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.blog-image {
width: 300px;
height: 300px;
object-fit: cover;
}
@media (max-width: 1200px) {
.image-container {
flex-wrap: wrap;
}
.blog-image {
width: calc(50% - 10px);
height: auto;
}
}
@media (max-width: 600px) {
.blog-image {
width: 100%;
}
}
--></style>
All help very much appreciated! I'm not a coder so I've used AI for help but it only got me this far.
Cheers!
