Change font to impact, it works only in desktop but doesn't work in mobile

Hello, I want to change font family for “Sold Out” label to be Impact, I put this class .labels-rectangular .product-label, .out-of-stock product-label in Advanced typography but it works only in desktop. In mobile, the font still looks the same, nothing changed.

Hello,

Please provide your site URL so that we could provide you with custom CSS. If your site is under maintenance, please provide your site admin access in the private area

Best Regards

Here you are

Hello,

Please check the credentials. I cannot log in.

Best Regards

Sorry please change that email address to “admin” that is username.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .labels-rectangular .out-of-stock {
    font-size: 15px;
}

You can use this selector in the Advanced typography body .labels-rectangular .out-of-stock

Best Regards

No, it’s not working. I even use !important but not working.

Hello,

Please find this custom CSS in the Theme Settings > Custom CSS and change it:

body .labels-rectangular .out-of-stock {
    font-family: Impact, Charcoal, sans-serif, Tahoma, Helvetica, sans-serif!important;
    font-weight: 400;
    font-size: 34px;
    color: #ff0036;
}

Best Regards

I don’t know what you mean by “change it”. This is css code is already there but it’s not working in mobile.

Hello,

Find this code and insert in Theme Settings > Custom CSS > Mobile, change this line as per your needs: font-size: 34px;

Best Regards

My point is I add the code to all the place: global,desktop,tablet and mobile butt it’s doesn’t work in mobile. I already clear cache, sill doesn’t work.

Hello,

Check if you have already added the code this code is in force. It the code works in the destop /tablet it should work in mobile as well.

Best Regards

I don’t know why it doesn’t work. I remove all the custom css code in Appearance to see. Also check in other place, I don’t see duplicate css code that is in force.

Hello,

Please update your site access. I cannot log in with the credentials you have provided.

Best Regard

I can login with the credentials provided. Last time I told you to change that email to “admin” Here you are.

Hello,

Correct this code https://prnt.sc/t0mege change the font size as per your needs.

The same you have in Mobile https://prnt.sc/t0mfg6

Best Regards

with that css code in the correct places as you can see,It still does’t work. I even clear cache in my browser and also cache in cpanel. Here is the look in my real mobile. https://www.dropbox.com/s/bk0mowsd1ksky84/Screenshot_20200616_183826.jpg?dl=0. Did you try viewing my website with your mobile device or you just resize the browser to see? Resizing the browser, you will see that it works. However, it doesn’t work when you view it in a mobile device.

Hello,

Reduce the font-size to 14px in all the code snippets. Now your font-size is 34px.

Best Regards

I’m talking about font family, you told me to change font size. This is so crazy. How it’s related to font size? My question is font Impact doesn’t show in mobile. It shows only in desktop. Now you told me to change font size? I’ve changed font size to 14px in all the code snippets. So what? I view my site, just only font size changed, but not font family.

Hello,

I have misunderstood you. I thought you mean fit by size.

Try to write the font-family in this way: font-family: Impact, Charcoal, sans-serif, Arial, Helvetica, sans-serif;

Please correct the font-size as they were.

Best Regards

No, it doesn’t work. The font still doesn’t change to Impact in mobile, it changes only in desktop.

Hello,

After double-checking, Impact is in the list of the Standard font-families. https://prnt.sc/t1gjid This font is plugged in locally only with Windows. Android does not have this font.

If you still want the Impact font family, you need to find this font and upload as the custom font https://xtemos.com/docs/woodmart/faq-guides/upload-custom-fonts/ Then when you chose the font, you should choose it from the Custom fonts list.

Then you can assign the font to the selector which you used via Advanced Typography. It would work.

You can remove my duplicating selectors and all the custom CSS I have provided.

I do apologize for confusing.

Best Regards

Done!

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts