How to fix layout of images on product pages for desktop

Store Design
,
1

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

Allen6224_0-1716186582414.png
Allen6224_0-1716186582414.png1688Ɨ949 159 KB

Code for the images

Light Gray Miralux fabric in light gray color
Saddle Miralux fabric in saddle color
Chocolate Miralux fabric in chocolate brown color

Thanks,
Allen Reynolds

2

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

3

Hi @Allen6224

You can update the code to this and check again.


**Light Gray** 
![Miralux fabric in light gray color|600x600](upload://f09xZBGYdHy4IJ53hF4GsxbOwRD.jpeg)

**Saddle** 
![Miralux fabric in saddle color|600x600](upload://r9YRT1e75uMKEAWmrqhvRMUcOCm.jpeg)

**Chocolate** 
![Miralux fabric in chocolate brown color|600x600](upload://5Gn7HGNEI6ZYngTDrPPeDRH7FC9.jpeg)
1 Like
4

Hi @Allen6224 ,

You can try this code by following these steps:

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

BSSTechVenture_1-1716188629948.png
BSSTechVenture_1-1716188629948.png1902Ɨ899 133 KB

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

BSSTechVenture_2-1716188640955.png
BSSTechVenture_2-1716188640955.png1916Ɨ934 101 KB

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:

BSSTechVenture_0-1716188497006.png
BSSTechVenture_0-1716188497006.png1918Ɨ874 211 KB

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 :heart_eyes:

5

This is Noah from PageFly - Shopify Page Builder App

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


**Light Gray** 
![Miralux fabric in light gray color|600x600](upload://f09xZBGYdHy4IJ53hF4GsxbOwRD.jpeg)

**Saddle** 
![Miralux fabric in saddle color|600x600](upload://r9YRT1e75uMKEAWmrqhvRMUcOCm.jpeg)

**Chocolate** 
![Miralux fabric in chocolate brown color|600x600](upload://5Gn7HGNEI6ZYngTDrPPeDRH7FC9.jpeg)

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly