How do I keep button position the same on all screens

Bluetango
Visitor
3 0 0

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

 

This is Mobile:

Bluetango_1-1709425878171.png

And this is wide screen:

Bluetango_3-1709426076395.png

Thank you!

 

 

 

Replies 4 (4)

deepaksharma
Shopify Partner
448 62 91

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

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
Bluetango
Visitor
3 0 0

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

deepaksharma
Shopify Partner
448 62 91

can you share the url for your website.

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
Bluetango
Visitor
3 0 0

Www.bluetango.co.nz

 

Thank you!