A user seeks to reduce banner text size on mobile devices, as it currently covers the entire image and looks cluttered.
Solutions Proposed:
Custom CSS via theme.liquid: Add media query code in the theme.liquid file above the </body> tag to control mobile text sizing.
Edit base.css directly: Locate line 287 in base.css and modify the existing media query for .h0 font-size, changing from 4rem to 3rem for screens under 767px width.
Current Status:
The original poster has shared a reference image showing their desired mobile layout but hasn’t confirmed whether either solution achieved the intended result. The discussion remains open with no marked resolution.
Hi,
Is there anyone here who might know how to make the banner text smaller on only the mobile version?
As for right now the text covers upp the whole picture? See example below. If it would be possible to make the button and text smaller to make it look more clean.
URL: https://la03ue1o3c6qefsa-86795059542.shopifypreview.com
Hey @norduxe
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 @norduxe
Go to online store ----> themes ----> actions ----> edit code ---->base.css —> line number 287
search this code
@media screen and (max-width: 767px) {
.h0 {
font-size: calc(var(--font-heading-scale)* 4rem);
}
}
and replace with this code
@media screen and (max-width: 767px) {
.h0 {
font-size: calc(var(--font-heading-scale)* 3rem);
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
