How do I keep button position the same on all screens

Store Design
, ,
1

Hi,

I’m in Dawn 13.0 theme and have created a slideshow on my homepage that looks perfect in the desktop view. But when I switch to the mobile view, or the full screen view or even my widescreen computer view the button has moved and it looks really odd. How do I keep the button in exactly the same place across all screens.

This is how it looks on desktop:

Bluetango_0-1709425829354.png
Bluetango_0-1709425829354.png1383×553 480 KB

This is Mobile:

Bluetango_1-1709425878171.png
Bluetango_1-1709425878171.png492×197 88.5 KB

And this is wide screen:

Bluetango_3-1709426076395.png
Bluetango_3-1709426076395.png1872×755 287 KB

Thank you!

2

Hey there,

To fix this issue you will need to add a media query for each viewport for the buttons and the text inside the button similar to this

/* Default button styles */
.button {
    /* Your default button styles here */
}

@media screen and (max-width: 768px) {
    .button {
        font-size: 14px; /* Adjust as needed */
        padding: 10px 20px; /* Adjust as needed */
    }
}

this is just a sample you can play around till you find the perfect match, you can also take help of tools like chatGPT or Gemini to create these type of codes

3

Thank you - I really appreciate that and have now fixed the button position for Mobile view.

I haven’t managed to fix it for a full screen or wide screen view as I’m not sure what to put instead of ‘@media screen and (max-width: 768px)’ - could you please help?

Thank you

4

can you share the url for your website.

5

Www.bluetango.co.nz

Thank you!