FROM CACHE - en_header

Why isn't this code working?

Solved
styl
Excursionist
54 0 9

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?

Accepted Solution (1)

Accepted Solutions
DavidEKim
Shopify Partner
229 61 76

This is an accepted solution.

@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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner

View solution in original post

Replies 4 (4)
DavidEKim
Shopify Partner
229 61 76

This is an accepted solution.

@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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
styl
Excursionist
54 0 9

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

styl
Excursionist
54 0 9

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

DavidEKim
Shopify Partner
229 61 76

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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner