Hi there,
i have an issue with the text align to the center, if i do pad the mobile version is messed up.
Desktop content position is middle center
https://xfswc99ri4cf9xq3-65779892391.shopifypreview.com
thanks in advance.
Topic summary
A user encountered an issue with text alignment on an image banner where centering the text on desktop caused problems with the mobile version.
Problem Details:
- Desktop content position was set to middle center
- Attempting to add padding broke the mobile layout
- Screenshots were provided showing the misalignment
Solutions Offered:
Three different approaches were suggested:
-
CSS injection via theme.liquid - Add custom CSS code before the
</head>tag in the theme.liquid file -
Direct CSS modification - Add alignment code to the main CSS file (main.css, base.css, style.css, or theme.css):
.content-container.content-container--full-width-mobile {
align-self: center;
}
Resolution:
The user confirmed the issue was resolved with a thank you message, indicating one of the CSS solutions successfully centered the banner text across both desktop and mobile views.
2 Likes
Do you want like this @batyaJandMore ?
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Result:
-
Desktop:
-
Mobile:
If it helps you, please like and mark it as the solution.
Best Regards 
1 Like
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.
.banner__box.content-container.content-container--full-width-mobile {
align-self: center;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
thanksssss 