Hi Shopify Community,
I’m having issues fixing the mobile sizing of the text overlay on a hero image of the homepage. I added custom css to adjust the length of the heading text for desktop because we wanted “FOR EVERY BODY” on one line and “FOR EVERY ADVENTURE” on the next. (without the custom code this was being put into 3 lines). But now, this adjustment is affecting the mobile view, so I’m hoping to see if there is a code I can add to fix the sizing issue on mobile while keeping the desktop version as is. OR if the code I entered is wrong and needs to also be fixed accordingly. Thank you!
Here is the site URL for reference: https://a2b-essential.myshopify.com/
Hi @a2bessential
I have checked. You used this code to set the fixed width of texts on banner.
You can try to replace the above code with this code:
I added a media query in the new code for mobile screen.
I hope my solution helps you.
Best regards,
GemPages Support Team
Hi @a2bessential
This is Victor 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 theme.css
Step 3: Paste the below code at bottom of the file → Save
@media screen and (max-width: 767px){
h2.image-hero__text-container-heading.ff-heading.fs-heading-display-1.section-blocks__heading {
font-size: 20px !important;
}
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
Hi,
Thank you for your help! Where can I find the above code to replace as you suggested? Is this in the theme.liquid or custom.css file? Please let me know when you have a moment and I will try to see if this works!
Hi @a2bessential
If you can’t find the code to replace, you can add the following code before the tag in the theme.liquid file.
Go to Online Store->Theme->Edit code.
Open theme.liquid, then add below code before tag
Best regards,
GemPages Support Team
