How to shift the button of image banner to left & right

[suryagoswami7]

Hey, How can i shift the button in image banner to left & right? Please help. Thanks in advance!

[PageFly-Richard]

Hi @suryagoswami7

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->base.css ->paste bellow code in bottom of file

.banner__buttons.banner__buttons–multiple {

display: flex !important;

flex-direction: row !important;

flex-wrap: nowrap !important;

justify-content: center !important;

}

.banner__box {

min-width: 0 !important;

}

[href=“/pages/shop-men”] {

right: 250px !important;

}

[href=“/pages/shop-women”] {

left: 250px !important;

}

Hope that my solution works for you.

Best regards,

Richard | PageFly

[suryagoswami7]

Hey @PageFly-Richard , It work’s but only on desktop, on mobile device the button’s disappeared.

[PageFly-Richard]

please try again with this code:

.banner__buttons.banner__buttons–multiple {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
}
.banner__box {
min-width: 0 !important;
}
[href=“/pages/shop-men”] {
right: 250px !important;
}
[href=“/pages/shop-women”] {
left: 250px !important;
}

@media screen and (max-width: 767px){
[href=“/pages/shop-women”] {
left: 0 !important;
min-width: 150px !important;
}
[href=“/pages/shop-men”] {
right: 0px !important;
min-width: 150px !important;
}
.banner__buttons {
max-width: fit-content !important;
}
.banner__box {
width: 0 !important;
}
}

[suryagoswami7]

Hey, it worked this time but in the mobile device the buttons are in the middle, is it possible to place them in the middle bottom?

[PageFly-Richard]

add this code:

@media screen and (max-width: 767px){
[href=“/pages/shop-women”] {
top: 140px;
}
[href=“/pages/shop-men”] {
top: 140px;
}
}