Hello! I’m trying to remove the padding between the top line and the date on the mobile password landing page. Any advice would be appreciated!
Topic summary
Issue: Remove excessive padding between the top line and the date on the mobile password landing page (Shopify).
Proposed fix (CSS in theme assets):
- Edit the theme’s main CSS file (base.css/style.css/theme.css) via Online Store → Themes → Edit code.
- Add a mobile-specific media query (≤749px) targeting the password page banner section (ID: Banner-template–16566581428404__main).
- Within that query: hide the .banner__media element and set the .banner__content (middle-center, page-width) height to 50vh to reduce vertical space.
Notes:
- The solution relies on a section-specific ID; applicability may vary if the ID differs across stores.
- Before/after screenshots were shared to show the reduced spacing; images are central to understanding the visual change.
Outcome: The original poster confirmed the change worked. Status: Resolved; no further questions or disagreements.
1 Like
Hi @ssworks
Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
div#Banner-template--16566581428404__main .banner__media {
display: none;
}
div#Banner-template--16566581428404__main .banner__content.banner__content--middle-center.page-width {
height: 50vh;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
Magnificent you’re the GOAT ty