@TBNP22 here is the correct code, sorry about my previous reply, that was broken.
#shopify-section-template--14496620183681__main .product-single__meta--wrapper { padding-left: 16%; padding-right: 7%;} @media screen and (min-width:320px) and (max-width:767px) { #shopify-section-template--14496620183681__main .product-single__meta--wrapper{ padding-left: 6%; padding-right: 1%; } }Topic summary
Adjusting product-page padding in the Debutify theme was attempted by overriding CSS in theme.scss, but it didn’t apply—likely due to theme defaults. A working approach is to add the CSS in theme.liquid inside a tag, which successfully changed desktop padding but unintentionally affected mobile.
To limit changes to desktop, a CSS media query was introduced for mobile (320–767px). The key correction was to place the @media block inside the same tag and repeat the exact selector (#shopify-section-template–… .product-single__meta–wrapper) within the media query to set different mobile padding.
Outcome: A corrected code snippet was provided with the proper selector and media query structure. Store URL was requested for further help but not shared. Final confirmation of resolution by the original poster is not shown.
New update: Another user reported unexplained extra padding beneath the product page, sharing a screenshot that is central to diagnosing the issue. No code or store URL was provided, and no fix was offered yet. The thread remains open with this new question.
Notes: theme.scss and theme.liquid are Shopify theme files; CSS media queries control styles at specific screen sizes.