Font not resizing

Support
#1

Hi

I have custom CSS to add a font and then resize depending on device. It doesn’t appear to fire the custom CSS on phones or tablets. Is my CSS wrong or is there a known issue with Themex?

The custom font loads ok but the resizing doesn’t work

.AreYou{
font-family: “AreYou” !important;
font-size: 20px !important;
color: #999 !important
}

.AreYouSmall{
font-family: “AreYou” !important;
font-size: 18px !important;
color: #999 !important
}

@media only screen and (max-width: 767px) {
.AreYou{
font-size: 18px !important;
}
.AreYouSmall{
font-size: 14px !important;
}

}

@media only screen and (max-width: 429px) {
.AreYou{
font-size: 16px !important;
}
.AreYouSmall{
font-size: 12px !important;
}

}

Any pointers would really help!!

#2

Hi There,

Upon checking your website, I could see that the font is resized on my iPhone 7:

Could you please clear all the cache and check again?

Thanks.

#3

HI

I have cleared but but I get the same as you. The second line is cut off and no matter what I change the font sizes to in the @media section it never changes

#4

Hi There,

Could you please try reduce the size to 14px and 10px instead?

@media only screen and (max-width: 429px) {
.AreYou{
font-size: 14px !important;
}
.AreYouSmall{
font-size: 10px !important;
}

}

Let us know how it goes!

#5

Hi

Tried that and still no difference.

#6

Hi there,

I checked your site and the codes seems to be working fine where:

.AreYou {
    font-size: 20px !important;
}

That is in

@media only screen and (max-width: 479px)

But I don’t seem to see any layer on the RevSlider or any element with a class AreYouSmall. Please try double checking your page and make sure that you have added the class to the element where you want to target.

Hope this helps.

#7

Hi

AreYouSmall is on the Handmade page. Should I separate them into 2 @media

#8

Hi again,

Try replacing your code with the following code:

@media screen and (max-width: 767px) {
  body .AreYou{
    font-size: 18px !important;
  }
  body .AreYouSmall{
    font-size: 14px !important;
  }

}

Let us know how this goes!

#9

You sir are a genius!!!

Thanks so much that worked perfectly.

Great support again, cannot recommend ThemeX enough!

#10

Glad we could help.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.