Hello. We have a text alignment option. However, is there a way to keep the texts on one side only and will not go over after the middle part of the banner?
Topic summary
A user seeks help constraining banner text to one side without wrapping past the midpoint. The issue involves text alignment settings that currently allow content to extend across the full banner width.
Solutions Provided:
Multiple community members offered CSS-based fixes:
- Custom CSS injection: Adding code snippets to
theme.liquid(above</body>or</head>tags) to limit text width usingmax-widthproperties - Direct stylesheet editing: Modifying
theme.bundle.cssin the assets folder with width constraints (e.g.,width: 80% !important)
Outcome:
The user confirmed one solution worked successfully for the heading element, though initially questioned whether it would also apply to paragraph text. An updated code snippet was provided to address both elements.
Technical Details:
Solutions target .heading and .paragraph classes with CSS width restrictions to prevent text from extending beyond a specified percentage of the banner width. Screenshots demonstrate before/after results showing text constrained to the left portion of the banner.
Hey @leidee
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Hey @leidee
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello @Moeed - The heading worked but is there a possibility that this will work on paragraph as well?
Hey @leidee
Remove this previous code and try this updated code.
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
Hi @leidee
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Thank you so much!! This worked!!! Amazing xx
Hello @leidee
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> theme.bundle.css
add this code at the end of the file.
.heading.heading--large {
width: 80% !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks