Padding Issue Product Page both mobile and pc

Store Design
, ,

Topic summary

A user is experiencing unwanted padding on their product pages (tunetoyz.com) affecting both desktop and mobile views. They want to reduce the spacing between the header and product content.

Solutions Attempted:

  • Initial CSS code suggestions targeting the product template were provided but didn’t resolve the issue
  • A revised approach was offered: adding custom CSS directly in the product template’s custom CSS box
  • The desktop issue was resolved, but mobile padding remained problematic

Working Solution:
A mobile-specific CSS fix was provided using a media query:

@media only screen and (max-width: 749px) {
  section#MainProduct-template--18148672504020__main {
    padding-top: 15px;
  }
}

Implementation:

  • Navigate to product template settings
  • Open the custom CSS box
  • Add the media query code at the bottom
  • Adjust padding value (15px) as needed

The discussion includes screenshots demonstrating the before/after states and implementation steps. The issue appears resolved with the mobile-specific CSS approach.

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

Hello my website is tunetoyz.com. My site currently looks like the top image, but I want it to look like the bottom image. I believe it is a. padding issue this exists on both pc and mobile. Thank you for your help!

Screen Shot 2024-09-24 at 8.47.04 PM.png
Screen Shot 2024-09-24 at 8.47.04 PM.png900×1278 104 KB

Screen Shot 2024-09-24 at 8.47.15 PM.png
Screen Shot 2024-09-24 at 8.47.15 PM.png832×1272 108 KB

Screen Shot 2024-09-24 at 8.46.00 PM.png
Screen Shot 2024-09-24 at 8.46.00 PM.png2936×1308 179 KB

Screen Shot 2024-09-24 at 8.45.41 PM.png
Screen Shot 2024-09-24 at 8.45.41 PM.png2940×1514 296 KB

2

Please add this code to theme.liquid, after and check again

{%- if template.name == 'product' -%}

{%- endif -%}
3

Screen Shot 2024-09-24 at 9.09.06 PM.png
Screen Shot 2024-09-24 at 9.09.06 PM.png2938×1100 323 KB

Hey I added it but the site still looks the same. Thanks

4

try this code

{%- if template.name contains 'product' -%}

{%- endif -%}
5

Screen Shot 2024-09-24 at 9.12.29 PM.png
Screen Shot 2024-09-24 at 9.12.29 PM.png898×1494 112 KB

Hey it works on pc but on mobile I want it to look like this. Thanks

6

Hi @TuneToyz

kk thanksFirst you should go to the product template and there you should have open the custom css box and there will add this css

section#MainProduct-template–18148672504020__main {
padding-top: 15px;
}

or

click on product information stetting

and at the bottom you see the padding option for increase or decrese

8414eb7e-eaa3-4ea2-b049-febe94bc663d.png
8414eb7e-eaa3-4ea2-b049-febe94bc663d.png1366×641 73.3 KB

7

Hi @TuneToyz

If my solution reply helpful? Click Like to let me know!
Mark it as an Accepted Solution

1 Like
8

hey is there a way to make the change only on mobile? Thanks

9

Hi @TuneToyz

Yes You Should Add i have provided css in media screen than its only work on mobile.

Add this css on custom css box at the very bottom i will attached screenshot

5f2e5eca-acb1-4990-9ee8-e0282dc25c60.png
5f2e5eca-acb1-4990-9ee8-e0282dc25c60.png1366×641 178 KB

@media only screen and (max-width: 749px) {
section#MainProduct-template--18148672504020__main {
padding-top: 15px;
}
}

Thanks And Regards

10

Hi @TuneToyz

If my solution reply helpful? Again Click Like to let me know!
Mark it as an Accepted Solution