Excessive whitespace between the header and the product image on the mobile product page; requester seeks code to move the image closer to the header.
Initial guidance: edit the Shopify theme.liquid file and paste code before the closing . A screenshot illustrates the intended result, but the shared code content is effectively empty, so the exact change is unclear.
Follow-up CSS approach: add a mobile-only media query to hide a#pagecontent and reduce top padding for the product container class (.container.main.content.product-name–ultimate-bodyex-program { padding-top: 10px }). Implemented in styles.scss.css.
Outcome: requester reports no visible change on mobile after the first CSS attempt.
Revised implementation: place the CSS inside a tag directly in theme.liquid before , correcting the selector to a#pagecontent (no space). The media query targets screens ≤767px to reduce the container’s top padding and hide the pagecontent anchor.
Technical notes: theme.liquid is the theme’s main layout file; styles.scss.css is the stylesheet; @media (max-width: 767px) targets mobile.
Attachments (screenshots and code snippets) are central to the proposed fixes. No confirmation of resolution; issue remains open.
Hey,
Can anyone provide a code that would move the product image closer to the header on my product page? This is referring to the mobile version of my website as it is primarily optimized for that.
URL is: jasaoslaj.com/products/ultimate-bodyex-program
Thank you!
Hello @jasa11
It’s GemPages support team and glad to support you today.
I would like to give you a solution to support you:
Open your theme.liquid theme file
Paste the below code before :
Result:
Hope my solution can work and support you!
Kind & Best regards!
GemPages Support Team.
Hi @jasa11
This is Victor from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file styles.scss.css.
Step 3: Paste the below code at bottom of the file → Save
@media screen and (max-width: 767px){
a#pagecontent {
display: none !important;
}
.container.main.content.product-name–ultimate-bodyex-program {
padding-top: 10px !important;
}
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
Theres still space on mobile. Nothing has changed with this code.
You can try again with this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code in tag → save.
@media screen and (max-width: 767px){ a#pagecontent { display: none !important; } .container.main.content.product-name--ultimate-bodyex-program { padding-top: 10px !important; } }Hope that my solution works for you.
Best regards,
Victor | PageFly
