Dawn 2.0 - Add padding to specific banner (not all)

Store Design
1

Hi,

how can I add padding-right: 20% to a specific banner, and for mobile only?

It’s for the banner on the homepage.

Website: https://straight-narrow-drinks.myshopify.com/ (password zeropercent)

Thanks so much

2

@hannahdossary ,

Can you share the screenshot ?

3

of course

Current.png
Current.png379×465 93.5 KB

.

How it currently is

Prefered.png
Prefered.png376×549 94.6 KB

with padding-right: 20%

4

Put the CSS in base.css file

@media screen and (max-width: 749px)
#shopify-section-template--16176707829976__image_banner .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
   max-width: 341px;
}
}

Hit Like and Accept as Solution

5

@hannahdossary ,

What’s your requirement ?

6

Try this in your css for mobile

#Banner-template--16176707829976__image_banner > div.banner__content.banner__content--middle-left.page-width > div {
    padding-right: 25%;
}

Note that this is based on the ID of your banner and will target it specifically. The CSS style might stop working in case of any changes to the banner.

straight_narrow_banner_css.png
straight_narrow_banner_css.png619×1359 201 KB

7

@hannahdossary ,

@media screen and (max-width: 749px)
#shopify-section-template--16176707829976__image_banner .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
   max-width: 341px;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

8

I put this within @media screen and (max-width: 749px){ }

but it doesnt seem to work

9

this doesnt seem to work

10

Same as @Shop_Lovers but doesnt work

11

@hannahdossary ,

oscprofessional_0-1656591118100.png
oscprofessional_0-1656591118100.png3053×804 304 KB

12

Found it out. This code seems to work.

@media screen and (max-width: 749px){
#shopify-section-template--16176707829976__image_banner .banner .banner__box {
    padding-right: 20% !important;
}
}

Now i need to do the same to another page but i cant figure out which section # to use. anyone able to help so i can resolve this page?

the image at the top on this page: https://straight-narrow-drinks.myshopify.com/pages/offer