Solved

How to fix layout of images on product pages for desktop

Allen6224
Tourist
10 0 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

 


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

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8018 1563 1586

This is an 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>

 

 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 4 (4)

Moeed
Shopify Partner
3927 995 1242

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

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Dan-From-Ryviu
Shopify Partner
8018 1563 1586

This is an 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>

 

 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

BSSCommerce-HDL
Shopify Expert
769 249 262

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

 

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

BSSTechVenture_2-1716188640955.png

 

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

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

PageFly-Noah
Shopify Partner
1288 229 262

 

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.