How to remove padding around product images in desktop mode

Are you tired of excess padding around your product images on desktop? Here’s a simple guide to help you tidy up your Shopify store’s appearance.

A quick and easy solution

To remove most of the padding around your product images in desktop mode, follow these straightforward steps:

1. Head to your Shopify admin panel and click on ‘Online Store’.
2. Look for the ‘Edit Code’ option and click on it.
3. In the list of files, find and open ‘theme.liquid’.
4. Scroll down to the bottom of the file, just above the tag.
5. Add the following code snippet:

<style>
@media screen and (min-width: 768px) {
.product-media-container.constrain-height {
    width: 100% !important;
}
}
</style>

6. Save your changes, and you’re done!

This simple addition to your theme will remove most of the padding around your product images, but only when viewed on desktop screens. The change won’t affect how your store looks on mobile devices.

The code we’ve added uses a media query to target screens wider than 768 pixels – typically desktop displays. It then adjusts the width of the product image container to 100%, effectively removing the extra padding.

Conclusion

By following these steps, you can give your product images a cleaner, more professional look on desktop. This small change can make a big difference in how your store appears to potential customers.