Shopify themes, liquid, logos, and UX
Trying to reduce text size of titles in catalog for mobile only here https://stylcase.com/collections/iphone-13-pro-max-cases, so I found this code.
.full-unstyled-link {
text-decoration: none;
color: currentColor;
display: block;
font-weight: normal;
font-size: 20px;
margin-bottom: 1rem;
}
So I added this new code above that one to try and fix it:
@media screen and (min-width: 750px) {
.full-unstyled-link {
font-size: 1.5rem;
}
}
But it is not working, anyone know why?
Solved! Go to the solution
This is an accepted solution.
Hi,
For mobile, you should use @media screen and (max-width: 750px)
Please change min-width to max-width.
It must as below.
@media screen and (max-width: 750px) {
.full-unstyled-link {
font-size: 0.8rem;
}
}
Hope it helps.
Thanks.
This is an accepted solution.
Hi,
For mobile, you should use @media screen and (max-width: 750px)
Please change min-width to max-width.
It must as below.
@media screen and (max-width: 750px) {
.full-unstyled-link {
font-size: 0.8rem;
}
}
Hope it helps.
Thanks.
Thank you, but I have tried that code and it doesn't seem to be working
The rem stands for “root em” and 1 equal to the base html element. You used 1.5rem and it will increase the font size. Please use px for your needs.
@media screen and (max-width: 750px) {
.full-unstyled-link {
font-size: 24px;
}
}
Hope it helps.
Thanks.
Apologies, it worked I just had to add !important at the end, thank you!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024