Solved

Align text left on mobile- product page

Daniel19901
Shopify Partner
131 0 15

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

 

Daniel19901_0-1715938562436.png

 

Accepted Solutions (2)

PageFly-Henry
Shopify Partner
1132 322 275

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Anshul_arora
Navigator
408 115 80

This is an 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-

Anshul_arora_0-1715941763317.png

 

I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 3 (3)

PageFly-Henry
Shopify Partner
1132 322 275

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

PageFly-Henry
Shopify Partner
1132 322 275

@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.

PageFlyHenry_0-1715939557053.png

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Anshul_arora
Navigator
408 115 80

This is an 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-

Anshul_arora_0-1715941763317.png

 

I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here