A user’s product details are displaying centered on mobile instead of left-aligned like on desktop, with no theme settings available to fix it.
Proposed Solutions:
Two responders provided CSS code snippets to resolve the alignment issue:
PageFly-Henry suggested adding CSS to the theme.css file targeting .product-single__meta and .sales-point elements with text-align: left !important and justify-content: left !important within a media query for mobile screens (max-width: 768px).
Anshul_arora identified the root cause as center-aligned text-align and justify-content properties, recommending similar CSS code to be added before the closing </body> tag in the theme.liquid file.
Both solutions involve custom CSS modifications to override the current center alignment. PageFly-Henry also noted the header is excessively large on mobile, covering nearly half the page and creating a poor user experience.
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
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
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.
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 tag and save.
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.
