A user needed to reduce the font size of text in an image banner specifically for mobile view, as the text and button weren’t fitting properly within the banner.
Solution Provided:
A support representative from PageFly shared CSS code to be added to the base.css file, targeting:
Implementation Steps:
base.css fileOutcome:
After initial confusion about file placement (attempting Theme.liquid first), the user successfully implemented the code in base.css and confirmed the issue was resolved.
Would anyone be able to help me with the code to change the size of the text in the image banner on the mobile view? i need it to be smaller so the button and text can fit on the image banner for mobile. I have attached a preview link of the website below that will expire in 2 days.
Link - https://r6upc4avborujmcu-71948271909.shopifypreview.com
Hi @InnHaus
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
@media (max-width: 767px){
.banner__heading strong {
font-size: 18px !important;
}
h2.banner__heading.inline-richtext.h1 {
margin-top: 80px !important;
}}
Hope that my solution works for you.
Best regards,
Henry | PageFly
Hi,
Would it be in the base.css file? If so i have just tried this and it didnt make the image benner text any smaller on mobile view.
Yes, I think it works fine in base.css file. Or you can add this to Theme.liquid
Hi, I tried this again but it didn’t work in Theme.liquid. On the second try of posting in the base.css file it actually worked! Thank you a lot for this im so happy to finally have it sorted.
You are welcome @InnHaus 