Hi! How can I center the header image text on 10xfuel.com (see attachment)? Thx!
Topic summary
A user seeks help centering header image text in the Dawn theme. Multiple solutions are provided:
CSS Approaches:
- Add CSS to
base.cssfile (Online Store → Themes → Assets → base.css) - Target
.banner__content.banner__content--middle-center.page-widthwithjustify-content: center - For responsive design, use media query targeting
.banner .banner__contentand.banner .banner__headingwithtext-align: centerandmargin: 0 auto
Alternative Method:
- Edit
theme.liquidfile and insert custom markup before the</body>tag
File Clarification:
The original poster questions whether base.scss.liquid exists. A respondent confirms the file exists in Dawn theme, providing a screenshot as proof.
All solutions involve accessing the theme code editor through the Online Store admin panel.
@10xfuel ,
.banner__content.banner__content--middle-center.page-width {
justify-content: center;
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
Hello @10xfuel
It’s GemPages support team and glad to support you today.
You can follow these steps:
- Go to Online Store → Theme → Edit code
- Open your theme.liquid theme file
- Paste below code before :
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
1 Like
@10xfuel
put below css into your base.css file (online store->themes->asset->base.css)
@media screen and (min-width: 768px){
.banner .banner__content.banner__content--middle-center {
justify-content: center;
}
.banner .banner__heading{
text-align: center;
margin: 0 auto;
}
}
Assets “base.scss.liquid”? Does it exist?
@10xfuel
yes , it’s exist dude .As you can see in below image in dawn theme
