Shopify themes, liquid, logos, and UX
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!
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
Hope my answer will help you
Mike from Omega
It just made the main image small, so unfortunately doesn't fix my problem. Thanks for trying.
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); }
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.
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
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025