Can't align texts/buttoms on product page

Store Design
1

Hi, i can’t seem to figure out how i align everything on the product page, it seems like some things are centered and some things is more to the left. Anyone know how to solve this?

thanks in advance

shopify support.png
shopify support.png1403×843 125 KB

2

I can do it super fast, hire me! navadiya@yahoo.com

3

Hi @Soffsits

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

product-info h1, product-info .price.price–large.price–sold-out.price–show-badge {

text-align: center;

}

product-info ul.list.list-payment {

justify-content: center !important;

}

product-info variant-selects {

display: flex !important;

justify-content: flex-end;

}

product-info modal-opener {

width: 100% !important;

text-align: center !important;

}

product-info form {

display: flex !important;

align-items: center;

flex-direction: column;

}

product-info .product-form__buttons {

width: 100% !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

4

Hi! I tried it but nothing seems to change unfortunately. using dawn theme

Kind regards Kalle

5

Hi @Soffsits

As in the image you provided, I only see two buttons that haven’t been aligned properly.

To align them, you can add this code snippet to the end of the file base.css:

.product-form__buttons {
    max-width: unset !important;
}

The result will look like this image:

BSSTechFusion_1-1714806064586.png
BSSTechFusion_1-1714806064586.png1631×964 153 KB

I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.

6

Hi, i like the look on the picture you sent me. when i paste it into basecss nothing happends. i copyed it and put it in the buttom.

Kind regards kalle

7

Hi @Soffsits , I have checked your base.css file, it seems that the CSS line you added has been commented out and has no effect. Please go into the base.css file and remove the commented part that I have marked in the image below.

BSSTechFusion_0-1714961106379.png
BSSTechFusion_0-1714961106379.png1214×720 60.1 KB

I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.

8

Thanks a lot! really helped me