How can I reposition and resize my image banner button on mobile?

Store Design
, , ,
1

Hello I would like to move my image banner button to the bottom right on mobile and make the button a little smaller. If anyone could provide a code, that would be greatly appreciated.

image button.png
image button.png376Ɨ732 239 KB

2

Hi @rezithclo ,

This is Victor from PageFly - Landing page builder, Iā€™d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-image-banner.css->paste below code at the bottom of the file

@media screen and (max-width: 749px){
.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
    top: 40%;
    display: flex;
    flex-direction: row-reverse;
    padding: 0 2rem 0 0;
}
.banner:not(.banner--mobile-bottom) .button--secondary{
    padding: unset;
}
}

Hope my answer will help you.

Best regards,

Victor | PageFly

1 Like
3

https://pzv21hpjen3heymu-52120158362.shopifypreview.com

works on desktop but not mobile

4

Can you show me where you added the code please.

5

banner button code.png
banner button code.png1517Ɨ842 36.2 KB

6

You can delete my code in the previous answer and replace it with the code below

@media screen and (max-width: 749px){
.banner__box.content-container.content-container--full-width-mobile.color-background-2.gradient {
    top: 40%;
    display: flex;
    flex-direction: row-reverse;
    padding: 0 2rem 0 0;
}

.banner__buttons > .button.button--secondary {
    padding: unset;
}
}
7

Hello, I was wondering if there was a way to adjust your code so that I can make the button a little smaller Image attached is an example of how I would like it. And the link preview is how it currently is.

button example.png
button example.png358Ɨ559 308 KB

For mobile https://szkqzflg19odkkqa-52120158362.shopifypreview.com