A user is attempting to create a full-screen background image/GIF with a centered email box that displays correctly on both desktop and mobile devices. They also want to remove a gray bar appearing at the bottom of the page.
Solutions Proposed:
Two support teams offered CSS-based fixes:
EBOOST’s approach: Modify the section-image-banner.css file by adding specific CSS code to set the banner position to absolute and height to 100%, with media queries for responsive behavior.
GemPages’ approach: Edit the theme’s liquid file and paste custom markup code before the </head> tag.
Both solutions involve accessing the theme editor through Online Store > Theme > Edit code. Screenshots were provided to guide the implementation process, though the specific code snippets appear partially corrupted in the conversation text.
Hello, I would like to make sure my page is correct on both desktop and mobile. I am trying to make the background gif or image that i have full screen with the email box in the center and I can’t find a way to remove the grey bar at the bottom. Help is very appreciated.
My URL is :
https://homecentreshop.myshopify.com/password
password is:ohtootles
Hi @jpborja1020
May I suggest to update code these steps:
.password .banner--medium:not(.banner--adapt) {
min-height: 100vh;
}
.password .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media,
.password .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
height: 100%!imprtant;
position: absolute!important;
}
Hello @jpborja1020 ,
It’s GemPages support team and glad to support you today.
I would like to give you a recommendation to support you so kindly follow steps below:
Open your theme.liquid theme file
Paste the below code before
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team