Mr. I am using Parker theme. However, the detail page appears on the right side of the PC screen. I want it to appear centered. here is the link… https://ulenspop.com/collections/monthly-colored-contacts/products/national-queen-brown-2ea-silicone-hydrogel
Hello @ulenspop ,
You can try to follow these steps:
Go to Online Store → Themes → Actions → Edit code
Go to Assets → base.css file → add this following code at the bottom of page
.product-detail-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Save changes
Hope this can help. Let us know if you need any further support.
Ali Reviews team.
2 Likes
Hello,
Thank you for your support. but there is not base.css file in Assets. Here are the all files in Assets…
@ulenspop add below css into stylesheet.css file which comes under assets .
.span-6.auto {
grid-column: auto / span 14 !important;
width: 100%;
}
Hi @ulenspop
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the css file:
.product__section-content {text-align: center !important;}
.product__quickview-wrapper .price, .product form .price, .product__section-content__block–price .price {align-items: center !important;}
.gpo-app {justify-content: center !important;}
.product__section input.add.clearfix.AddtoCart {width: 100% !important; max-width: 100% !important;}
Regards,
San
It worked. But the main image has also changed.
I want to make only the product detail page display right-to-center.
I looked for the code name you said but couldn’t find it. When I looked for the code related to the product, it looked like this:
product.3-concept-eyes-back-to.json
product.boost-pfs-quickview-option.liquid
product.boost-pfs-quickview.liquid
product.gf_quickview.liquid
product.json
product.listing.liquid
product.quick.liquid
featured-product.liquid
main-product.liquid
product-list.liquid
product-recommendations.liquid
Where should I put the code you said?
Where are you referring to the css file? Could you please tell me the name of the file?
Here are the css file we get.
@ulenspop you need to have make changes in html to solved out the issue. For that need the store access.
You can add this CSS in your bottom of the stylesheet.css file.