How to align "check out" button on mobile

[summerrage]

Hi there,

I'm trying to align the check out button with the other express checkout buttons on mobile (screenshot below):

What's the best way to do this? I am testing on on an iPhone 14 Plus.

[Hamza_takkar]

Hey Summerrage , our team will help you 

1. Access Your Theme Code:

   • In your Shopify admin, go to Online Store > Themes.
   • Find the theme you're using and click Actions > Edit code.

2. Locate the Relevant CSS File:

   • Look for the CSS file where your button styles are defined. This is usually located in the "Assets" folder and may be named something like theme.css or styles.css.

3. Add CSS for Button Alignment:

   • Add or modify the CSS to ensure the "Check out" button has the same width and alignment as the other buttons.

Here is an example of the CSS you might add or adjust:

css

Copy code

.btn-checkout { width: 100%; display: block; text-align: center; margin-bottom: 10px; /* Adjust this value as needed */ } /* Ensure all buttons have consistent padding and margin */ .btn-checkout, .shop-pay-button, .apple-pay-button, .google-pay-button { padding: 15px 0; /* Adjust padding as needed */ margin-bottom: 10px; /* Adjust margin as needed */ }

Apply the CSS to Your Checkout Button:

• Ensure that the "Check out" button in your HTML has the btn-checkout class or modify the existing class to match your CSS.

For example, your HTML might look like this:

html

<button class="btn-checkout">Check out</button>

Save Your Changes:

• After making the changes, click Save to update the file.

1. Test Your Changes:

   • Test the changes on your mobile device to ensure the "Check out" button aligns properly with the other express checkout buttons.

By adding or adjusting these styles, you should be able to align the "Check out" button with the other express checkout buttons on mobile devices. If the problem persists, you might need to inspect the specific CSS properties used by the

[summerrage]

Hi Hamza, thank you for the quick reply! I don't see anything in the assets folder titled theme.css or styles.css. Here's a quick loom on what I see:

https://www.loom.com/share/d39002fc54704c9bbaf9a3afda5e2394

[Hamza_takkar]

hey summerrage , 

you should search for a file theme.liquid , 

hope my answers helps you

[Moeed]

Hey @summerrage 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[summerrage]

Thanks, Moeed! Sure thing. It's rageart.studio, pw: "letsrage"

[Moeed]

Hey @summerrage 

It looks completely fine on my screen, did you fix it?

Best Regards,

Moeed

[summerrage]

Hey Moeed - nope. What phone do you have? Good to know it's not happening on all devices.