Solved

Why is the background of my newsletter section not 100% black on mobile?

msrwalsh
Shopify Partner
39 1 11

On desktop, the section for my newsletter sign-up is black but on mobile, it appears grey. Both have the background set to black. 

 

Screenshot 2024-03-07 at 18.53.01.pngScreenshot 2024-03-07 at 18.53.12.png

Accepted Solution (1)

Vinsinfo
Shopify Partner
168 58 53

This is an accepted solution.

@msrwalsh Please follow below steps to display the background color of the footer in black color for mobile view and let me know whether it is useful for you.

 

1. From admin, go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search "frame.scss.css" file and paste below code at the bottom of the file.

 

@media screen and (max-width: 967px) {
    .home-newsletter-block .newsletter-block:before {
        background: inherit !important;
    }
}

 

priyavinsinfo_0-1709879747400.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

View solution in original post

Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
7532 1454 1450

Hi @msrwalsh 

Could you share your store URL to check?

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Vinsinfo
Shopify Partner
168 58 53

This is an accepted solution.

@msrwalsh Please follow below steps to display the background color of the footer in black color for mobile view and let me know whether it is useful for you.

 

1. From admin, go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search "frame.scss.css" file and paste below code at the bottom of the file.

 

@media screen and (max-width: 967px) {
    .home-newsletter-block .newsletter-block:before {
        background: inherit !important;
    }
}

 

priyavinsinfo_0-1709879747400.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

msrwalsh
Shopify Partner
39 1 11

This worked!

Thank you so much.