Thank you. You are quick and thorough!
Topic summary
Mobile layout shows a large white space between product media and the product title on a Debutify product page (Solair Racerr Pro). The goal is to reduce that gap so the title appears closer to the images.
Core fix: adjust CSS on mobile to remove top margin of the product meta wrapper. Multiple replies recommend setting .product-single__meta–wrapper { margin-top: 0 } within a mobile media query (max-width ~749–769px).
Implementation options provided:
- Edit code: Online Store > Themes > Edit code > theme.scss.css, add a mobile @media block with .product-single__meta–wrapper { margin-top: 0 !important; }.
- Customize path: Online Store > Themes > Customize > Theme settings > Custom CSS, add the same rule.
- Modify an existing mobile block around the product title (noted near line ~9212) to also include the meta wrapper margin-top: 0.
- One suggestion placed CSS in theme.liquid before (screenshot shows reduced gap; code snippet not displayed).
Screenshots illustrate the reduced spacing on mobile. The original poster acknowledged the help; the issue appears resolved without further debate.
1 Like