Hi @vmstore ,
To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?
Thank you and hope to hear from you.
Best regards,
GemPages Support Team
Topic summary
Goal: Reorder the Dawn theme’s product page on mobile so the product title (and ideally vendor and rating) appear above the product image to reduce spacing between image and options.
Key solution shared:
- Edit theme code: Online Store → Themes → Edit code → Assets → section-main-product.css.
- Add CSS to move the title above the image:
.product.grid { position: relative; padding-top: 100px; }
.product.grid .product__title { position: absolute !important; top: 0; } - Note: This moves only the title; vendor name and review stars remained below for the OP. The OP later had their review app adjust the rating placement.
Mobile-only requirement:
- Several users want this change only on mobile. A follow-up tip recommends wrapping the CSS in a media query (e.g., @media screen and (max-width: …)) so it applies only to small screens. Media queries limit CSS to specific viewport sizes.
Current status:
- A working CSS snippet for the title was provided; mobile scoping via media query was suggested.
- No shared, comprehensive code for moving vendor and ratings along with the title; OP relied on review app support.
- Additional users requested guidance; discussion remains open with pending specifics for full mobile-only layout adjustments.
Note: The code snippet is central to understanding the implementation.