Author Topic: Which CSS is rendering for phone view  (Read 3689 times)

Offline Sam_78

  • Sr. Member
  • ****
  • Posts: 270
  • Karma: +42/-1
    • View Profile
Which CSS is rendering for phone view
« on: December 21, 2018, 12:07:21 PM »
I am having issues with fonts on my site. I am using
font-family: 'Fredoka One', cursive;
And it works fine for PC and desktop but on phone I am getting small cursive fonts. I tried to use media query but it is not working
in style.css
     /* Phone fonts*/
        /* iPad [portrait + landscape] */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)     {
    body {
    font-weight:800!important;
        font-family: 'Fredoka One', cursive!important;
font-size:20px;
}
}

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
    body {
font-weight:800!important;
font-size:20px;
        font-family: 'Fredoka One', cursive!important;
}
}
It is not taking any of these CSS When I inspect on chrome browser for iphone it works fine but when I actually use my phone it is different
I have cleared cache on my phone and on AbanteCart.
Only change I made is in style.css in body tag changed font-family thats it and added the mentioned code at the bottom. i am editing right CSS file as I can see these media queries in browser when I inspect them

Offline Sam_78

  • Sr. Member
  • ****
  • Posts: 270
  • Karma: +42/-1
    • View Profile
Re: Which CSS is rendering for phone view
« Reply #1 on: December 21, 2018, 12:11:29 PM »
Sorry figured it out
That font was not there on my phone had to mention this in head.tpl
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5774
  • Karma: +274/-2
    • View Profile
Re: Which CSS is rendering for phone view
« Reply #2 on: December 24, 2018, 12:14:29 AM »
Sorry figured it out
That font was not there on my phone had to mention this in head.tpl
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">

You need to change it to 
Code: [Select]
<link href="//fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">So no matter what protocol on page fonts will be always loaded.

 

Powered by SMFPacks Social Login Mod