Reducing padding on product page

Store Design
, , , ,
1

Hi everyone and happy new year!

I am working on a new jewellery site and I want my product images to fill 50% of the screen (left hand side).

I am using dawn theme, but customising the template.

Current:

Screenshot 2026-01-07 at 16.25.22
Screenshot 2026-01-07 at 16.25.221920×996 176 KB

What I want it to look like:

Screenshot 2026-01-07 at 16.25.30
Screenshot 2026-01-07 at 16.25.301920×977 119 KB

Please let me know if you can help

Thanks,

Mary

2

Hey @marycrichton123

Can you share your Store URL and Password if enabled?

Best,
Moeed

3

Hi @marycrichton123

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

4

Password: meelib

5

Pwd: meelib

6

Hey @marycrichton123

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (min-width: 768px) {
.product-media-container.constrain-height {
    width: 100% !important;
}
product-info .page-width {
    max-width: 100% !important;
    padding: 0 !important;
}
.grid__item.product__media-wrapper {
    max-width: 55% !important;
}
}
</style>

RESULT:

image
image1895×913 130 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

8

amazing. Thank you so much that worked perfectly

9

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

10

What CSS would remove the gapping between the images?

Screenshot 2026-01-07 at 17.26.00
Screenshot 2026-01-07 at 17.26.001794×1272 209 KB

11

Here’s the updated code.

<style>
@media screen and (min-width: 768px) {
.product-media-container.constrain-height {
    width: 100% !important;
}
product-info .page-width {
    max-width: 100% !important;
    padding: 0 !important;
}
.grid__item.product__media-wrapper {
    max-width: 55% !important;
}
.product__media-wrapper .product__media-list {
    gap: unset !important;
}
}
</style>

Best,
Moeed

12

Moeed,

Thank you so much.

When I am creating the images to fit the size, what do you reccommend?

Thanks,

Mary