A user encountered excessive white space on their Shopify product page (Label theme) after removing thumbnail images below the main product image. The layout appeared particularly problematic on desktop at 100% view.
Initial Request:
Solution Provided:
A CSS code snippet was shared to reduce left padding:
Outcome:
The CSS solution successfully resolved the spacing issue. The user confirmed the code worked and improved the page appearance.
On my product page I got a code to remove the thumbnails under the main image which is great but now I have another issue. There is just too much empty space. Can I align all the product info on the right with the image on the left so there is no extra space under the main image? On PC this looks horrible at 100% view. On Mobile its hard to see it but does look like a lot of extra padding.
Example
I’d like to keep the image size and just adjust the info on the right if possible. Too much extra padding between information.
Hey @Mike213
Can you like provide a screenshot of exact white space which you’re talking about so that I can understand better and provide you accurate code?
Best Regards,
Moeed
Hi @Mike213 ,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css Add the provided code at the end of the file.
.product-section .col-span-1.lg\:col-span-5.xl\:pl-10.in-view {
padding-left: 0px !important;
}
Code worked. That looks much better.