Centre Product Page information only on mobile

[ellacoker]

Hello,

Is someone please able to help me centre my product page information only on mobile?

Mainly the description, pop up, heading, price, etc. 

Thank you

Ella.

URL: https://www.samiyaskincare.com.au/products/crown-chakra-face-mask-moringa

[Mustafa_Ali]

<style>
@media screen and (max-width: 767px) {
section#ProductInfo-template--24209589993766__main {
    text-align: center;
 }
}
</style>

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the <style> tag before the body ----->
if this code work please do not forget to like and mark it solution

[B2Bridge]

Hi @ellacoker  , you can follow these steps:

Step 1: Open Online Store -> Themes -> Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

@media screen and (max-width: 749px) {
    .product-popup-modal__opener.quick-add-hidden {
        width: 100% !important;
        text-align: center !important;
    }
}

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you 😍

[PageFly-Richard]

Hi @ellacoker 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media (max-width: 768px) {
section#ProductInfo-template--24209589993766__main > * {
    text-align: center;
}
modal-opener.product-popup-modal__opener.quick-add-hidden {
    width: 100%;
}
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly