How to fix layout of images on product pages for desktop

[Allen6224]

Hi,

The material images on the product pages of website now show vertically on desktop view.

They previously showed side by side which i want. For some reason they switched to vertical on desktop and i want them back to side by side. See below for Screenshot and code. My website is www.liftchairheaven.com


Product Page showing material images vertical for desktop view

Code for the images

<div id="gallery" style="text-align: center;">
<div style="text-align: center;">
<strong><span style="display: block;">Light Gray</span></strong> <img alt="Miralux fabric in light gray color" src="https://cdn.shopify.com/s/files/1/0746/8358/0713/files/1-psc_texture_bris_gray.jpg?v=1709326195" class="img" id="img1" style="margin-top: 16px; float: none;" onclick="change(this)">
</div>
<div style="text-align: center;">
<strong><span style="display: block;">Saddle</span></strong> <img alt="Miralux fabric in saddle color" src="https://cdn.shopify.com/s/files/1/0746/8358/0713/files/3-psc_texture_brisa_saddle.jpg?v=1709326226" class="img" id="img2" style="margin-top: 16px; float: none;" onclick="change(this)">
</div>
<div style="text-align: center;">
<strong><span style="display: block;">Chocolate</span></strong> <img alt="Miralux fabric in chocolate brown color" src="https://cdn.shopify.com/s/files/1/0746/8358/0713/files/Brisa-Spectra-Barista-SBA.jpg?v=1709326152" class="img" id="img3" style="margin-top: 16px; float: none;" onclick="change(this)">
</div>
</div>


Thanks,
Allen Reynolds

[Moeed]

Hey @Allen6224 

I'm unable to locate this product page on your website, can you share a link of that product page?

Best Regards,

Moeed

[Dan-From-Ryviu · Accepted solution]

Hi @Allen6224 

You can update the code to this and check again. 

<style>
@media (min-width: 990px) {
#gallery {
display: flex; 
justify-content: space-evenly;
}
}
</style>
<div id="gallery" style="text-align: center;">
<div style="text-align: center;">
<strong><span style="display: block;">Light Gray</span></strong> <img alt="Miralux fabric in light gray color" src="https://cdn.shopify.com/s/files/1/0746/8358/0713/files/1-psc_texture_bris_gray.jpg?v=1709326195" class="img" id="img1" style="margin-top: 16px; float: none;" onclick="change(this)">
</div>
<div style="text-align: center;">
<strong><span style="display: block;">Saddle</span></strong> <img alt="Miralux fabric in saddle color" src="https://cdn.shopify.com/s/files/1/0746/8358/0713/files/3-psc_texture_brisa_saddle.jpg?v=1709326226" class="img" id="img2" style="margin-top: 16px; float: none;" onclick="change(this)">
</div>
<div style="text-align: center;">
<strong><span style="display: block;">Chocolate</span></strong> <img alt="Miralux fabric in chocolate brown color" src="https://cdn.shopify.com/s/files/1/0746/8358/0713/files/Brisa-Spectra-Barista-SBA.jpg?v=1709326152" class="img" id="img3" style="margin-top: 16px; float: none;" onclick="change(this)">
</div>
</div>

[BSSCommerce-HDL]

Hi @Allen6224, 

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css or styles.css 

Step 3: Insert the below code at the bottom of the file -> Save

div#gallery {
    display: flex !important;
    justify-content: space-between !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

Hi @Allen6224  Please edit code like here. Thank you.

<div id="gallery" style="text-align: center; display:flex">
<div style="text-align: center;">
<strong><span style="display: block;">Light Gray</span></strong> <img alt="Miralux fabric in light gray color" src="https://cdn.shopify.com/s/files/1/0746/8358/0713/files/1-psc_texture_bris_gray.jpg?v=1709326195" class="img" id="img1" style="margin-top: 16px; float: none;" onclick="change(this)">
</div>
<div style="text-align: center;">
<strong><span style="display: block;">Saddle</span></strong> <img alt="Miralux fabric in saddle color" src="https://cdn.shopify.com/s/files/1/0746/8358/0713/files/3-psc_texture_brisa_saddle.jpg?v=1709326226" class="img" id="img2" style="margin-top: 16px; float: none;" onclick="change(this)">
</div>
<div style="text-align: center;">
<strong><span style="display: block;">Chocolate</span></strong> <img alt="Miralux fabric in chocolate brown color" src="https://cdn.shopify.com/s/files/1/0746/8358/0713/files/Brisa-Spectra-Barista-SBA.jpg?v=1709326152" class="img" id="img3" style="margin-top: 16px; float: none;" onclick="change(this)">
</div>
</div>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly