Product image issues

crosbyaudio
Tourist
11 0 4

Hi,

 

I'm having issues with my product images on Dawn 12. All product images are smaller than the first main image and are out of order on mobile. There was some custom code added, so not sure if that caused the issue. Any help is much appreciated!

 

https://crosbyaudio.com/products/tunemate

Replies 3 (3)

Mike-Omega
Shopify Partner
151 27 30

Hi @crosbyaudio 

This is Mike from Omega

You can try my solution to resolve your issue

1. Open Theme -> Edit code

2. Find the file section-main-product.css and find the code on line 647 and remove the code in the red box

MikeOmega_0-1704379929691.png

Hope my answer will help you

Mike from Omega

If it’s helpful to you, please give it a like or mark as a solution.
Need any help for Shopify Design or Custom task, please contact via email: locdt@omegatheme.com
Omega GDPR EU Cookie Banner: Effortlessly stay compliant with EU GDPR, CCPA
crosbyaudio
Tourist
11 0 4

It just made the main image small, so unfortunately doesn't fix my problem. Thanks for trying. 

BSS-Commerce
Shopify Expert
3398 450 503

Hi @crosbyaudio ,

Your first problem is that the following images are smaller than the first. This is affected by the CSS code you added to the base.css file. Please delete this code so that the images display equally:

  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

 view - 2024-01-08T093758.144.png

The second problem occurs because the javascript code you added before hides the image, you need to check again. Or maybe some app you use to process has hidden the images. I checked, and those images' HTML tags are still there, but the image transfer button handling cannot be moved. When I f5 again, all 9 images are displayed, but it flickers and then only displays 5 images. This is handled by JavaScript code.

view - 2024-01-08T093855.169.png

 

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development