Remove top padding product page on mobile

Store Design
, , , ,

Topic summary

A user seeks CSS code to remove top padding above product images on mobile, wanting them flush with the banner. The issue was resolved with multiple solutions provided.

Solutions offered:

  • Add custom CSS in theme.liquid file before the </body> tag
  • Target specific padding/margin properties for mobile product images
  • Multiple developers (Moeed, Beae_Cass, Artzen_tech) provided similar CSS injection approaches

Outcome:
The original poster confirmed the solution worked successfully.

Related follow-up:
Another user (Grand_Pacific) asked about removing padding between product images on the Prestige theme PDP to create a box-style gallery layout, referencing example URLs showing current vs. desired image spacing effects.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Could someone help with some css to remove the spacing above the product image on mobile - I want it sitting flush to the banner above.

See image below.

url - https://romanandisaac.co.uk/products/rustic-wooden-dining-table-x-legs - password isaac

Screenshot 2023-09-22 at 12.56.22.png
Screenshot 2023-09-22 at 12.56.22.png970×1428 196 KB

2

Hey @cabinandcrate

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 tag

RESULT:

Moeed_0-1695384057191.png
Moeed_0-1695384057191.png391×708 198 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @cabinandcrate ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Best regards,

Anthony

1 Like
4

Hello @cabinandcrate
Its Artzen Technologies! We will be happy to help you today.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → theme.liquid file.

Add the following code in the bottom of the file above tag

Let me know if need further assistance
Regards,
Artzen Technologies

5

Thanks!

6

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.

7

Hi Moeed,

I would like to remove the padding between images on the Prestige theme PDP to create a box style group of images. Something like this. I am assuming the image height variety is created by the image uploaded but how can I remove the padding between the images?

desired effect:

https://formermerchandise.com.au/products/ocillate-t-shirt

current effect:

https://grandpacificcustoms.com/products/amped-tee-in-dark-dirty-pink

Thanks!