Solved

Why isn't the mobile text size adjustment code working in Shopify?

styl
Explorer
62 0 13

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)

DavidEKim
Shopify Partner
392 131 184

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
392 131 184

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
Explorer
62 0 13

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

DavidEKim
Shopify Partner
392 131 184

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
styl
Explorer
62 0 13

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