Hi,
I would like to remove the white space between the email sign up banner and footer on my password page when viewed on mobile. The white space seems to not appear on desktop. See the screenshot below.
Thankyou in advance.
Topic summary
A user seeks to eliminate white space between an email signup banner and footer on their password page’s mobile view, while the desktop version displays correctly.
Store Details:
- Site: moralins.com
Solutions Provided:
Two CSS-based fixes were offered:
-
websensepro’s approach: Add code to theme.css/base.css targeting
.password-main(set flex-grow to 0) and.password__footer(add 7rem padding-top) for screens under 768px width. -
Rahul_dhiman’s approach: Modify section-image-banner.css by adding a media query targeting
.banner--medium:not(.banner--adapt)with a min-height of 16rem for screens 750px and wider.
Both solutions include screenshots demonstrating the expected results. The issue appears resolved, as the original poster thanked both contributors.
Hello,
Please share “Store URL”
Thanks!
hello, its moralinstinct.com
thankyou!
Hi @DD2024
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:767px){
.password-main {
flex-grow: 0 !important;
}
.password__footer {
padding-top: 7rem !important;
}
}
Result:
If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!
Hello @DD2024
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->section-image-banner.css
add this code at the end of the file and save.
@media screen and (min-width: 750px) {
.banner--medium:not(.banner--adapt) {
min-height: 61rem !important;
}
}
result
Thanks
Thankyou!!