Not sure how to move this whole text in the middle
https://www.audette.store/products/lip-butter-gloss
Topic summary
A user needs help centering text within a column on mobile devices for their Shopify product page. They provided a screenshot showing left-aligned text that they want centered.
Another user provided a CSS solution:
- Uses a media query targeting screens 767px and below
- Applies flexbox properties (display: flex, justify-content: center, align-items: center) to center the content
- Includes text-align: center and removes padding
- Targets the specific class
.image-with-text__content.middle.left.mobile-left
Implementation steps:
- Navigate to Online Store → Themes → Three Dots → Edit Code
- Locate the
theme.liquidfile - Insert the CSS code within
<style>tags before the body section
The solution includes a screenshot demonstrating the centered result. The discussion appears resolved with a working code solution provided.
2 Likes
@media screen and (max-width: 767px) {
.image-with-text__content.middle.left.mobile-left {
padding: 0px !important;
display: flex !important;
justify-content: center !important;
text-align: center;
align-items: center;
margin-top: 5px;
margin-bottom: 10px;
}
}
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution
1 Like