how to reduce background size of text on desktop and mobile

Store Design
, ,
1

VERATH_0-1737960559437.png
VERATH_0-1737960559437.png1011×509 649 KB

i wish for the black background that the white text is on to be smaller, both height and width, or able to change the transparency on the box too, also ive seen some other similar solutions where you have to paste some code into the liquid. something i dont remember but ive tried the code and it doesn’t seem to work for me and I think i am doing it wrong, could someone also help me figure out how to do that as well? thankyou.

2

Hey, thanks for posting here.
can you please share the link to inspect it, thanks.

3

@VERATH

Please share your store URL!

Thanks!

4

what do you mean link?

5

its on my password page verath.store

6

VERATH.STORE

7

@VERATH

8

hello @VERATH

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->section-email-signup-banner.css…>line number 8…>search the code..>

@media only screen and (min-width: 750px) {
    .email-signup-banner:not(.banner--desktop-transparent) .email-signup-banner__box {
        width: 100%;
    }
}

and remove the code and save

2.step two

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->section -image-banner.css…>line number 1

Search the code

@media screen and (min-width: 750px) {
    .banner__box {
        padding: 4rem 3.5rem;
    }
}

replace with new code

@media screen and (min-width: 750px) {
.banner__box {
padding: 2rem 2.5rem;
}
}

and save the code

result will be

My-Store-01-27-2025_12_49_PM.png
My-Store-01-27-2025_12_49_PM.png1366×376 590 KB

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

9

Hi @VERATH

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

body.password.gradient .email-signup-banner__box.banner__box {
    padding-block: 10px !important;
    padding-inline: 10px !important;
    width: fit-content !important;
    background: rgba(0,0,0,0.5) !important;
}
body.password.gradient .email-signup-banner__box.banner__box h2 {
    width: fit-content !important;
    margin-inline: auto !important;
}

image (24).png
image (24).png1178×632 1.04 MB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

10

@VERATH please add it in css.

.email-signup-banner__box {
    background: #00000066;
    padding: 15px;
    max-width: fit-content;
}

ProtoMan44_0-1737964310934.png
ProtoMan44_0-1737964310934.png1895×797 445 KB

let me know if any further help you need about it