Centre "add to cart" button (Tried various methods)

[DJ_Alkemy]

I'm looking to centre the "add to cart" button on this page (and other pages with the add to cart button on): https://djalkemy.co.uk/shop-music-to-finish-a-fools-errand-cd 

I've looked at a few methods from other threads, but none seem to work.

I want to centre it, and make it so it's not sat on the divider line. It may not look like much, but it looks even worse in mobile mode. When centered, it'll look a lot better.

FYI: I'm using Visual Composer to update my website.

Any help is much appreciated.

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code

2. Find frontend.min.css and paste this at the bottom of the file:

@media screen and (max-width: 749px){
.shopify-buy-frame--product {
    max-width: inherit!important;
}
}

[DJ_Alkemy]

I couldn't find "frontend.min" anywhere on that page. Sorry if I'm being dim.

[ReturnPrime]

Hey  @DJ_Alkemy   ,
Welcome to the Shopify community!
You can follow the instruction below:
Go to Online Store->Theme->Edit code->base.css->paste bellow code in bottom of file.

@media only screen and (max-width: 749px) {
.shopify-buy-frame--product {
   max-width: 100% !important;
}
}

 If you feel like my answer is helpful, please Like and mark it as a solution. Let me know if you have any further questions.
Thank you!
Raman

[DJ_Alkemy]

Okay, I have done that, and saved it. How do I now get that to transmit to the page in question (and the others), as it's still not centred on the web page. Cheers.

[PageFly-Victor]

Hi @DJ_Alkemy,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid,

Step 3: Paste the below code at before </header> element of the file -> Save

<style>
@media screen and (max-width: 749px){
.shopify-buy-frame--product {
    max-width: inherit!important;
}
}
</style>

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[DJ_Alkemy]

So, before I change anything, and potentiall mess things up lol, do I copy and paste the code you wrote, in between 1 and 2 like so:Pic 1

So it would create a new line, and paste in here?: 

Sorry if I'm missing the point, it's confusing me, as I initially inserted code via raw HTML method, and took the code from Shopify, and pasted into the Raw HTML section of my website page.

[PageFly-Victor]

Hi @DJ_Alkemy,
Yes, you can try it

[DJ_Alkemy]

Tried that, and no, it didn't work, the button stays the same on my website. I thought this would be as simple as editing code on the button itself, then importing it into the Raw HTML section on my website page.

[PageFly-Victor]

Hi @DJ_Alkemy,I checked the source but I don't see my code.
you can try a way

[DJ_Alkemy]

Yeah, I took it back out as it didn't work unfortunately.

[PageFly-Victor]

You can try to add frontend.min.css

@media screen and (max-width: 749px){
.shopify-buy-frame--product {
    max-width: inherit!important;
}
}

[DJ_Alkemy]

I can't find that unfortunately. I'm gonna give up on this one, as it seems way too complicated, to do a simple thing. I thought I could just edit the raw HTML, on my website page, and get this sorted. I'll switch to a different platform, as this is just way too convoluted and clunky. Thanks for all your help though guys, much appreciated.