Moving Banner Button on mobile

Store Design
1

Hey guys! I’m having some issues with the shrine theme, this mobile version I’m wanting to move my button into the banner so it looks a bit more tidy, curve the edges and make a bit more skinnier, how would I do this? and also how can I ad a closing effect on the button if I wanted to ?

any help would be appreciated, thank you.

xfgdg.JPG
xfgdg.JPG364×429 24.4 KB

2

its sorted the placement out, but i need it to go lower and change the transparency of the background, maybe make it longer

asdasd.JPG
asdasd.JPG403×367 28.5 KB

3

Hi @ShaneoDunco

Could you share your store URL so I can check?

4

https://gymalphas.com/ the mobile is too far up

5

Hi @ShaneoDunco

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

@media (max-width: 749px) {
.banner__box { padding-top: 12rem !important; }
}
6

thank you so much! how can I move it down a bit more towards the bottom and change sizing?

7

Please update the code

@media (max-width: 749px) {
    .banner__box { padding-top: 12rem !important; padding-bottom: 0 !important; }
    .banner__box .button { padding: 15px 40px !important; }
}
8

Thank you! perfect.

9

also how can i make my top banner a different colour without changing theme backgrounds? so its separate

10

More detail?

11

change the top welcome banner colour separately

sdfsdf.JPG
sdfsdf.JPG444×378 31.8 KB

12

Please add this code, replace “#your-hex-color-code;” with your own color code.

.announcement-bar { background: #your-hex-color-code; }
13

where do I add sorry in edit code?

14

Custom CSS section where you added above code.

15

Got it! thank so much, can I keep adding custom codes to this section without slowing my store too much?

16

Shopify has a limit on how much CSS code can be added, but you can still add custom code until they allow more. Also, a few line of CSS code wont affect to speed of your store.

17

Appreciate your help!

18

You are very welcome!