Align text left on mobile- product page

[Daniel19901]

Hi, for some reason my product details on mobile are centered, but there's no way to fix it with the settings.

Can anyone help me with the code please? I want it to be aligned to left like it is on desktop:

https://ynco-ny.com/products/limitless-god-oversized-cotton-jersey-t-shirt-1

[PageFly-Henry · Accepted solution]

Hi @Daniel19901 

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 theme.css

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

@media (max-width: 768px) {

    .sales-point .icon-and-text {

        justify-content: left !important;

    }

.product-single__meta {

    text-align: left !important;

}

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[PageFly-Henry · Accepted solution]

Hi @Daniel19901 

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 theme.css

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

@media (max-width: 768px) {

    .sales-point .icon-and-text {

        justify-content: left !important;

    }

.product-single__meta {

    text-align: left !important;

}

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[PageFly-Henry]

@Hasan_Digital 

In addition, I noticed that your header is quite large, so when scrolling it covers almost half of the page, causing users to have to scroll for a long time to see the entire section. This causes a bad user experience. I think you should reduce the header height.

[Anshul_arora · Accepted solution]

Hello @Daniel19901 ,

I understand you are looking to move or change Product Detail Page text position in mobile view.

I have reviewed your store and find the issue you are facing is because you have set text-align & justify-content as center.

The below-mentioned code can help you to resolve this issue.

Please add the code at the bottom of the theme.liquid file before </body> tag and save.

<style>

@media only screen and (max-width: 768px)
{
.product-single__meta {
text-align: left !important;
}
}
@media only screen and (max-width: 768px){
.sales-point .icon-and-text {
justify-content: left !important;
}
}
</style>

After applying the code output will be like this -: https://prnt.sc/YqL4bTPjDFW-

I hope the code helps you.

Please share if you have any queries.

Thank you.