Different fonts between desktop & Mobile

  • Resolved Jamal Kassem

    (@jkassem)


    4 years, 11 months ago

    Hello,

    I tried to add fond using CSS it worked on Desktop but its not working on Mobile.

    Please check the below code:

    #wpsm_accordion_876 .wpsm_panel-title a {
    text-decoration: none;
    overflow: hidden;
    display: block;
    padding: 0px;
    font-size: 16px !important;
    font-family: "Noto Kufi Arabic" !important;
    color: #ffffff !important;
    border-bottom: 0px !important;
 }

#wpsm_accordion_876 .wpsm_panel-body {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-top-color: #147d6e !important;
    font-size: 15px !important;
    font-family: "Noto Kufi Arabic" !important;
    overflow: hidden;
    border: 2px solid #147d6e !important;
    line-height: 2.25 ;
}

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • hi @jkassem ,

    as i can see that the font style is appearing in mobile also here..but if you have still confusion add using media query `
    @media only screen and (max-width: 992px) {
    #wpsm_accordion_876 .wpsm_panel-title a {
    text-decoration: none;
    overflow: hidden;
    display: block;
    padding: 0px;
    font-size: 16px !important;
    font-family: “Noto Kufi Arabic” !important;
    color: #ffffff !important;
    border-bottom: 0px !important;
    }
    }`

    thanks..

    Thread Starter Jamal Kassem

    (@jkassem)

    Hello, Thanks for the reply.

    I did, but the font is still look different between the mobile and the desktop. I want to mobile version font to be the same on the desktop version.

    Please see the below screenshot.

    Click Here for the screen shot

    hi @jkassem ,

    you are using two differnt font-family in dekstop and mobile..you are using Helvetica font on desktop version there so you need to add font-family:”Noto Kufi Arabic” !important.

    thanks..

    Thread Starter Jamal Kassem

    (@jkassem)

    Hello,

    The Helvetica font is coming from the plugin itself, how i can remove it?

    Click HERE to see the screenshot from the plugin.

    Thank you.

    hi @jkassem ,

    add this in additional css 

    #wpsm_accordion_876 .wpsm_panel-title a
{
font-family:"Noto Kufi Arabic" !important;
}

    you can add more css accordingly in it..

    thanks.

    Thread Starter Jamal Kassem

    (@jkassem)

    Hello,

    Its already added.

    Once again, the problem is that the mobile version is showing different font. I want the mobile version to be similar to the desktop version font.

    I am currently using the above codes in my first post.

    I added your update in the 1st reply i received from you, but this broked the font in the desktop, so i had to remove it.

    Please advise?

    hi @jkassem ,

    i think you are not dong it as i am saying..please give me your dashbored credentials at senpreetam241[at]gmail[dot]com..i will fix it

    thanks.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Different fonts between desktop & Mobile’ is closed to new replies.