Why isn't my code reducing mobile catalog title text size?

Store Design
1

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?

2

@styl

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.

1 Like
3

Thank you, but I have tried that code and it doesn’t seem to be working

4

Apologies, it worked I just had to add !important at the end, thank you!

5

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.