I’ve added a description for one of our collections on our online store. It’s fine on desktop but on mobile, the text rolls over the collection banner. How can I edit the font size for mobile?
Theme: Boost
Hello TheCollective,
Please share your site url.
So that i can check and let you know the exact solution here.
1 Like
Sure, the website is https://thercollective.com/
The collection where I’m facing the problem on mobile is: https://thercollective.com/collections/archive-sale
Even if I could deactivate collection descriptions on mobile, that would be helpful.
Thank you!
Hello TheCollective,
To edit the font size for mobile.
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid
@media only screen and(max-width:768px){
.collection-background .reading-width.large-row.center p {
font-size: 10px;
}
}
Thank you! The font size now fits on the banner. But - I still see a copy of the text under the banner on mobile. See attached photo:
Add this css
@media only screen and(max-width:768px){
.page-width.collection-header.global-border-radius .rte {
display: none;
}
}
That’s fixed it! Thank you so much.