Issue: The Dawn theme’s Large heading looked good on desktop but overlapped content on mobile. The goal was to reduce the heading size on mobile without changing desktop.
Key action: A solution using a CSS media query was provided. It instructed adding code to base.css that targets mobile screens (max-width: 767px) and adjusts the banner heading class (.banner__heading.h0) with a smaller font-size and tighter line-height.
Technical note: A CSS media query applies styles only under certain conditions (here, screen width ≤ 767px), allowing different styling for mobile vs. desktop.
Outcome: Implementing the media query worked. The font-size was set to 29px for mobile, resolving the overlap while keeping the desktop heading unchanged.
Status: The heading sizing issue is resolved. A separate question will be opened regarding a gray line under the header on mobile.
As shown in the screenshot below when I use the Large Heading (which looks great on the desktop version) on the Mobile Version - it overrides the writing and it does not look so great.
Is there a way of making the Heading slightly smaller without changing it’s size on the side? As as soon as I change the heading to Medium etc. the Desktop Version changes too.
Share the store URL…
It’s PageFly - Page Builder App here, I hope you are doing well today!
Regarding the issue with heading on mobile view, please kindly follow my instruction here:
From Shopify dashboard, go to Online store > Themes > Edit code
In the search box, search for the file named base.css
Scroll to the very end of this file, and paste this code:
@media screen and (max-width: 767px){
.banner__heading.h0 {
line-height: 1.0em;
font-size: 35px;
}
}
Let me know if this work for you. Have a nice day ahead!
I’ve changed the font-size to 29px and it worked perfectly fine for me.
Regarding the grey line underneath the header in the mobile version - I will create a new question, so if you know the answer - please help me out!
Thanks! 