How can I position a button at the bottom centre in mobile view?

Store Design
,
1

how do I move the button on my first slideshow image to be at the bottom in the centre for the mobile view of the website, the desktop version has more options for the button placement but the mobile only has left, right and centre. I’d like to move the button to the bottom centre so the design isn’t covered by the button :slightly_smiling_face: (dawn theme)

2

Hi @oliverirvine ,

Could you please share URL and your store password? So that we can help you.
Thank you.

3

The url is azurie.co.uk and the password is seufrijhvuaecv

4

Hi @oliverirvine ,

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:not(.banner--mobile-bottom) .banner__box {
    top: 40%;
    align-items: center;
    display: flex;
}
}

Hope my answer will help you.

Best regards,

Victor | PageFly

5

The position of the button is perfect thank you, but is it possible to have it only moved on the first image of the slide show because that’s now moved all the button on each image to be at the bottom

thank you :slightly_smiling_face:

6

Hello there

To move the button on your first slideshow image to the bottom center for the mobile view of your website in the Dawn theme, you can use CSS to target the button and adjust its position. Here’s an example of the CSS code you can use:

@media only screen and (max-width: 749px) {
  .hero__content .btn-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
  }
}

This code targets the button wrapper element (.btn-wrapper) within the first slideshow image (hero__content) and sets its position to be absolute. It then centers the button horizontally using left: 50% and transform: translateX(-50%), and positions it at the bottom of the image using bottom: 20px.

You can adjust the bottom value to move the button up or down as needed.

7

@oliverirvine You can remove my code from the previous answer and replace it with the code below. It will only make the button on slide 1 change

@media screen and (max-width: 749px){
div[aria-label="1 of 5"] > div:last-child > div {
    top: 40%;
    align-items: center;
    display: flex;
}
}

PageFlyVictor_0-1677619963083.png
PageFlyVictor_0-1677619963083.png726×718 694 KB

PageFlyVictor_1-1677619978207.png
PageFlyVictor_1-1677619978207.png663×317 144 KB

8

I’ve copied and pasted it into the custom css but it says it’s invalid?

9

You can add my new code to section-image-banner.css

1 Like
10

Thank u so much! Really quick responses and really easy to understand:)

11

Can i get this code for Desktop So that i will adjust the top 40% and Move the button.

12

Hi how can i do it for both mobile and desktop instead of just mobile? Thank you :slightly_smiling_face:

13

Did you ever figure it out?