Main issue: On Shopify’s Dawn theme, the home page headline text appears too large on mobile. The requester also wants a semi‑transparent background behind the text.
What was tried: The helper provided CSS using media queries (max-width 999px and 749px) to reduce the banner heading font size, align the banner box to the bottom, add a semi‑transparent black background (rgba(0,0,0,0.5)) with white text and padding, and adjust mobile/tablet spacing. The CSS targets .banner__box and h2.banner__heading.inline-richtext.h1 and was first added to base.css. Screenshots were shared to show the issue and results.
Follow‑up issue: After adding the CSS, the headline still needed to move down on mobile. The helper then asked to place the CSS in theme.liquid before (after {% endif %}). The user tried both placements but saw no change.
Current status: No confirmed fix yet. The mobile text positioning and whether the CSS is being applied/loaded correctly remain unresolved. Images are central to understanding the visual issue.
Hi everyone,
I am having issues with my home page for the Dawn theme. The font size is wack when I view it on mobile. I have tried out a few codes but unfortunately, I’m still not able to sort it out. I would also love to add a semi-transparent background behind the text. I truly appreciate any help! Thank you!!
Would you mind to share your Store URL website? with password if its unpublish. Thanks!
Thank you so much for replying!
Thanks for the info, Do you mean like this?
Im sorryy, I descrease the size of the font. The size of the font is not adviceable for the mobile screen. It will take all the screen area of your mobile view. This is the code ive used. I also adjust the ipad screen but not the dekstop.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 999px){
.banner__box {
align-self: flex-end !important;
}
h2.banner__heading.inline-richtext.h1 {
font-size: 2.5rem !important;
}
h2.banner__heading.inline-richtext.h1 {
background-color: rgba(0, 0, 0, 0.5) !important;
color: white !important;
padding: 15px;
}
.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
padding-bottom: 2rem !important;
}
}
@media only screen and (max-width: 749px){
h2.banner__heading.inline-richtext.h1 {
font-size: 1.7rem !important;
}
}
And Save.
You can adjust it if you like.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you so much for your help!!! I have added the code and when I click on mobile this is how it appears… Is there a way to make the text move down?
Would you mind to place it on the theme.liquid.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “theme. Liquid” file. Find the tag and paste the code below before the tag.
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
I put it right below this section and it didn’t change it. Let me know if I am doing something wrong, please. Thank you again!
Before the
that is not before the body its before the {% endif %}
After {% endif %} and before the
Hi, I pasted it in the correct spot and it’s still not showing any change.
