How to fix buttons in dawn theme shopify

[silvee]

I need help fixing the button layout in my Shopify Dawn theme. Currently, the buttons are not aligned as I want them to be. I’d like them to appear in the same row, as two equal columns.

Could you provide the CSS and specify where to place it?

 

[Moeed]

Hey @silvee 

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

[silvee]

https://huyghi-mq.myshopify.com/     pass: "1"

[Moeed · Accepted solution]

Hey @silvee 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.product-form__buttons {
    display: flex !important;
    gap: 2rem !important;
}
.product-form__submit {
    width: 45%;
}
.shopify-payment-button {
    width: 45% !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[silvee]

Could u please help me out fixing this image carousel from 1 image to look like and work as 2 image:

[asharofficial]

Can you provide me the store URL so I can provide you the exact CSS 🙂 

[silvee]

Its my store`s URL only its been in started today only:  https://huyghi-mq.myshopify.com/products/classic-roman-coin-pendant-set

[asharofficial]

@silvee 

Steps to Add Custom CSS in Shopify

1. From your Shopify admin, go to Online Store > Themes.
2. Click Actions for the theme you want to edit, then select Edit code.
3. Find the base.css file under Assets (or whichever CSS file your theme uses).
4. Scroll to the bottom of the file and add the following CSS code

.product-form__buttons button, .product-form__buttons > div {
    width: 49%;
    display: inline-flex;
    margin: auto;
    margin: 2px;
}

shopify-buy-it-now-button button {
    width: 100% !important;
    display: block;
    margin: auto;
    padding: 15px 65px !important;
}