How to make password page full view height

Technical Q&A
,

Topic summary

A user needs help making a password page’s background image banner fill the entire viewport height (100vh) and full width.

Solution provided:

  • Add CSS code to the base.css file targeting .banner--medium:not(.banner--adapt) with min-height: 100vh !important
  • The provided code only applies to desktop screens (min-width: 750px)
  • A screenshot confirms the solution works on desktop

Follow-up questions:

  • How to identify the correct CSS class/ID for targeting other pages in the future
  • How to apply the same 100vh effect on mobile devices (currently excluded by the media query)

Status: Partially resolved - desktop implementation successful, but mobile viewport height and methodology for finding CSS selectors remain unanswered.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi there, I am looking to make background image banner for Password page 100vh, 100% width. I can’t for the life of me figure out the correct .class to make entire container 100vh if someone can please help. Will also want image to cover but assume code is already set to that.

https://marianogarments.shop/password

Thank you so much.

2

Hi @mariano1231

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

@media screen and (min-width: 750px) {
    .banner--medium:not(.banner--adapt) {
        min-height: 100vh !important;
    }
}

Result

DaisyVo_0-1741745405366.png
DaisyVo_0-1741745405366.png1889×930 570 KB

Best,

Daisy

3

Hi there, thank you so much for making it work.

Was just wondering so I don’t have to keep asking. How in the future if I want to target other pages do i find the correct banner .css id? and also is there a way to make the vh 100 on mobile.