Hi All, my collection list title overlay is too large on mobile, can this be changed to all fit on one line
URL;https://label-source.co.uk/
THEME: Reformation
Topic summary
A user’s collection list title overlay appears too large on mobile devices and doesn’t fit on one line. They’re seeking a solution to resize it.
Proposed Solutions:
Multiple respondents offered CSS-based fixes:
-
Custom CSS approach: Add media query targeting screens max-width 767px (or 749px in one variant) to reduce font size of
.collection-card.style2 .collection-card__content .collection-card__linkto approximately 0.75rem -
Implementation methods:
- Add CSS directly to
list-collections.cssfile - Insert code in
theme.liquidfile above the</body>tag
- Add CSS directly to
Key Details:
- The site uses the Reformation theme
- Solutions involve adjusting pixel/rem values to achieve desired sizing
- All responses recommend testing and fine-tuning the font-size value based on specific needs
The discussion remains open pending confirmation from the original poster on whether the solutions resolved the issue.
You can use this custom css code adjusting the px as you want:
@media screen and (max-width: 767px) {
.collection-card.style2 .collection-card__content .collection-card__link{
font-size: .675rem!important;
}
}
Hey @Danielparsons
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.
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
@Danielparsons - add this css to the very end of your list-collections.css file and check, adjust it as per the need and it will work
@media screen and (max-width:749px){
.collection-card.style2 .collection-card__content .collection-card__link{font-size: .675rem;}
}