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
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
I can do it super fast, hire me! navadiya@yahoo.com
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
Hi! I tried it but nothing seems to change unfortunately. using dawn theme
Kind regards Kalle
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:
I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.
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
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.
I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.
Thanks a lot! really helped me