Altering the BUY NOW button size to fit slide on REFRESH

Shopify Discussion
1

My website at www.bodybackcare.com is having an issue with the BUY NOW button at the homepage. Shopify offers no option to alter the size of the button so that it is aligned to to the page correctly. This issue is only on MOBILE view. on DESKTOP it is ok which is strange. can somebody help me with this issue please? I am on the refresh theme.

password for store is “requam”

Thanks

2

Hello @AAli

I would like to give you some recommendations to support you

You can add custom code like this

GemPages_Agents_0-1668474833975.png
GemPages_Agents_0-1668474833975.png1388×815 37.3 KB

You can change 100% to desired width

I hope the above is useful to you!

Kind & Best regards!

GemPages

3

Hello,

@GemPages I am a novice to shopify. Barring the width at “100%”. Do i copy and paste the code as it is? or does it need editing? also, where exacly in theme.liquid do i paste this code?

thanks

4

Hello @AAli

I would like to give you some recommendations to support you
you can follow these steps:

  1. Go to Online Store->Theme->Edit code
  2. Open your theme.liquid file, paste the below code before
    I hope the above is useful to you.
    Kind & Best regards!
    GemPages
5

hi @GemPages . i have done this now. but the button is still the same size and has not changed.

please see photo

AAli_0-1668587314620.png
AAli_0-1668587314620.png1353×902 32.5 KB

6

@AAli
I’ve checked the code from your site and see this 50%. Please up to 100%, save theme.liquid and reload live page

GemPages_0-1668587679814.png
GemPages_0-1668587679814.png1198×826 31.8 KB

I hope the above is useful to you.

Kind & Best regards!

GemPages

7

hi @GemPages . i used 100% but there was no difference, so changed it to 50.

it is now back to 100%. there is still no change :disappointed_face:

8

Hello @username
When you add 100%, page show like this

GemPages_0-1668588366482.png
GemPages_0-1668588366482.png375×526 15 KB

if you want center like this

GemPages_1-1668588521639.png
GemPages_1-1668588521639.png345×516 14.8 KB

You can add code

@media (max-width: 767px){
a.button.button--primary {
    min-width: 50% !important;
    margin-left: auto;
    margin-right: auto;
}
}

I hope the above is useful to you.
Kind & Best regards!
GemPages

9

hi @GemPages , there seems to be a little confusion here. the issue i have is with the BUY NOW button on the homepage, right at the very top. it is covering my slide photo as shown in the screenshot. this is the button shopify wont let me edit. i need to make it sit on the bottom left, below the brand name. and a little smaller. instead ,its stuck in the middle of the screen.

AAli_0-1668589076467.png
AAli_0-1668589076467.png533×392 49.7 KB

10

Hello @AAli

I would like to give you some recommendations to support you

You can add this code to fix it

I hope the above is useful to you.
Kind & Best regards!
GemPages

1 Like
11

@GemPages THANKYOU SO MUCH!