Anyone know how to align the content to the left side?
password: bautso
See reference:
Topic summary
A user seeks help aligning product page content to the left side on their Shopify store.
Initial Solution:
- Add CSS code to the theme’s main.css file (Admin > Online Store > Themes > Assets)
- Use
.product__info-wrapper .product__info-container * { text-align: left !important; }to align all content left - This solution works successfully
Responsive Adjustment:
- User requests left alignment on desktop only, centered on mobile
- Updated CSS provided using media queries:
- Desktop (min-width: 750px): left-aligned
- Mobile (max-width: 749px): center-aligned with auto margins
Resolution:
- Initial replacement code contained an error causing both views to center
- Code was corrected and re-posted
- Final implementation successful
The issue is now resolved with proper responsive alignment across devices.
1 Like
Hi @ReviveShop
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.product__info-wrapper .product__info-container * {
text-align: left !important;
}
And Save.
result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
Perfekt! Thank you!
Is it possible to align left only on desktop, and centered on mobile?
1 Like
Yes, sure. Same Instruction but replace on this code below. Thanks!
@media only screen and (min-width: 750px){
.product__info-wrapper .product__info-container * {
text-align: left !important;
}
}
@media only screen and (max-width: 749px){
.product__info-wrapper .product__info-container * {
text-align: center !important;
}
fieldset.js.product-form__input {
margin: auto;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
when I replace the code both are centered now again
Oops, I made a mistake in the code. I’ve already fixed it. Please go ahead and copy and paste it again.
1 Like
Perfect, thanks!