Password page on mobile - Blank space above coming soon banner. Can't remove background image

Shopify Discussion

Topic summary

A user encountered excessive blank space above the “coming soon” banner on their password page’s mobile view (hayatigoods.com). The red background image was preventing proper alignment to the top.

Attempted Solutions:

  • Unchecking “show background image” removed the red theme but unexpectedly changed font colors to white
  • Unchecking “show content below image on mobile” seemed to work but prevented theme color customization
  • Multiple solutions from Shopify help center failed

Working Solution:
A community member provided CSS code to be added to the theme’s main.css file (under Admin > Online Store > Themes > Assets):

@media only screen and (max-width: 749px){
  #MainContent.password-main .banner__media.media {
    display: none;
  }
  #MainContent.password-main .banner__content.banner__content--middle {
    background: #270209;
  }
}

Outcome:
The CSS solution successfully resolved the mobile spacing issue. The user confirmed it worked and marked the response as the solution. Note: Changes appear in preview/published theme, not the theme editor.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Password page on mobile > Blank space until you scroll to see the coming soon banner. Goal is to align the coming soon portion to the top, without as much blank space just on mobile. Also would be nice to hide the password portion on the header, but that’s not as much of a priority.

Site: hayatigoods.com

Currently: Have red background image enabled. That seems to be the portion above the coming soon banner that’s stopping the coming soon portion to be moved up.

Screenshot 2024-08-08 114246.png
Screenshot 2024-08-08 114246.png613×1175 23 KB

When I uncheck “show content below image on mobile” it seems to work BUT then i’m not able to change the theme colors for some reason. Idk why it’s turning the font white but keeping the red theme as is.

yasmineb_0-1723156666744.png
yasmineb_0-1723156666744.png1651×1220 134 KB

When I uncheck “show background image” i get this:

yasmineb_1-1723156751344.png
yasmineb_1-1723156751344.png1591×1215 83.3 KB

I’ve tried multiple solutions on shopify’s help center but none have worked so far. Thanks for your help.

1 Like
2

Hi @yasmineb
Check this one,.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
#MainContent.password-main .banner__media.media {
    display: none;
}
#MainContent.password-main .banner__content.banner__content--middle-center.page-width {
    background: #720909;
}
}

And Save.

Result:

Made4uoRibe_0-1723157566999.png
Made4uoRibe_0-1723157566999.png565×793 17.2 KB

Note: if the text color change on the theme editor and in the preview or publish is not. It is normal, no worries about that as long as it wont change on the preview/publish theme.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Wow this worked. Thank you so much!!!