Moving the Email Sign Up box further down

Store Design
, ,

Topic summary

A user seeks to move the email signup box lower on the password page’s desktop view only, without affecting mobile display.

Solutions Offered:

  • Theme customization option: One responder suggests using built-in theme settings to adjust desktop content position.

  • CSS modifications: Multiple CSS solutions were provided targeting different files:

    • Adding code to section-password.css with a media query for screens min-width 750px
    • Modifying section-image-banner.css with specific margin-top values

Issue:
Initial CSS attempts moved the banner on both mobile and desktop views, while the user specifically needs desktop-only changes.

Current Status:
One contributor confirms their CSS solution (using @media only screen and (min-width: 750px) with .banner__content targeting) should work exclusively for desktop, suggesting this may resolve the issue. The discussion appears ongoing as final confirmation of success is pending.

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

Hello, is it possible to move the email sign up box and the text above it further down the screen on the desktop view of the password page only? I don’t want the the changes made to affect the mobile site.

URL: billon.maison

Theme: Origin

Screen Shot 2024-09-25 at 4.49.42 PM.png
Screen Shot 2024-09-25 at 4.49.42 PM.png2560×1600 591 KB

2

Hi @MaisonBillonDon

It has the option to change Desktop content position in your theme’s customize

Screenshot 2024-09-26 at 08.14.34.png
Screenshot 2024-09-26 at 08.14.34.png1705×892 156 KB

3

Hi @MaisonBillonDon ,

Please go to Actions > Edit code > Assets > section-password.cs file and paste this at the bottom of the file:

@media only screen and (min-width: 750px) {
    .banner__content {
        margin-top: 40%;
    }
}
4

This did not change anything

5

Hi @MaisonBillonDon ,

Please change code:

@media only screen and (min-width: 750px) {
    .banner__content {
        margin-top: 300px;
    }
}

it will show like this:

Screenshot.png
Screenshot.png1345×776 190 KB

6

Hello @MaisonBillonDon
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> section-image-banner.css
add this code at the end of the file.

.email-signup-banner__box.banner__box.newsletter.newsletter__wrapper.isolate.content-container.color-scheme-1.gradient.content-container--full-width-mobile {
top: 15rem !important;
}

result

3.png
3.png1301×672 882 KB

If this was helpful, hit the like button and accept the solution.
Thanks

7

This moves the email signup banner down for mobile and desktop views. I only want to move the email signup banner down for the desktop view. How can I do that?

8

Hi @MaisonBillonDon ,

You tried my solution, it will only work for desktop.

I hope it helps!