Locked Site Desktop and Mobile View

Store Design
,

Topic summary

A user is customizing their locked site page and needs help with two main issues:

Image Display Across Devices:

  • Wants different image cropping for desktop vs. mobile views
  • The background image behind the email signup appears cropped on desktop but needs a different crop for mobile
  • One response suggests modifying the .banner:not(.banner--stacked) class in the section-email-signup-banner.css file by adding flex properties (flex-direction: row, flex-wrap: wrap, height: 100vh)

Email Signup Font Color:

  • Needs to change only the email signup text color
  • Solution provided: Add color: #000000; (or desired color code) to the .newsletter-form__field-wrapper .field__label CSS class

Both solutions involve CSS modifications to achieve the desired design customization.

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

Hi,

Designing my locked site page and want to have two different views on desktop and mobile. This is forthe image I have behind my email site up. The image is cropped for the desktop view but I want the same image but cropped different for the mobile view. Also how to I change only the email signup font colour?

Password page is https://deseptstudio.com/password

Thank you.

2

go to ;section-email-signup-banner.css’ file and fine ‘.banner:not(.banner–stacked)’ and update to look like following (add extra one line):

.banner:not(.banner--stacked) {
        flex-direction: row;
        flex-wrap: wrap;
        height: 100vh;
    }
3

Hi @MrDeSept

change only the email signup font colour: color:#000000; or the color you want.

.newsletter-form__field-wrapper field__label{
 color:#000000;
}