comment button not affected by css

• 

  innisfreehomestead · Member · Oct 4, 2016 at 4:33 pm

  • Copy link

  Hey there,

  I’m still not seeing the changes, but this should help you target the mobile widget headers:

  @media screen and (max-width: 768px) {
  .widget-footer-area .widget-title {
  	font-family: "[font family here]" !important;
  }
  }

  Hope that helps,
  Sage

• 

  moshekahol · Member · Oct 4, 2016 at 4:50 pm

  • Copy link

  If I want to target the font family of all the site? It seems that the font changes when viewing the site on phones

  Thanks sage

• 

  innisfreehomestead · Member · Oct 4, 2016 at 4:59 pm

  • Copy link

  Hey there,

  To target the font of the whole site the CSS has to use selectors to make sure everything is included. Something like this (being very general so as to not leave anything out):

  @media screen and (max-width: 768px) {
  .widget-footer-area .widget-title, p, body, h1, h2, h3, h4, h5, h6, a, li {
  	font-family: "[font family here]" !important;
  }
  }

  Hope that helps,
  Sage

• 

  moshekahol · Member · Oct 4, 2016 at 5:08 pm

  • Copy link

  it so unusual…. even this wont change the font family when using phones… do you know why is this?

• 

  innisfreehomestead · Member · Oct 4, 2016 at 5:15 pm

  • Copy link

  Hey there,

  If that doesn’t do the changes either then I’m looking at the font/browser as the culprit. Here is a discussion regarding it http://stackoverflow.com/questions/5082632/same-font-yet-its-weight-seems-different-on-different-browsers

  Does that help?
  Sage

• 

  moshekahol · Member · Oct 4, 2016 at 5:25 pm

  • Copy link

  the issue is that the font reverse to the defult when using phones… it not just “look dffrent” but it reverse to the defult font and not the font I use in css

• 

  innisfreehomestead · Member · Oct 4, 2016 at 5:42 pm

  • Copy link

  Hello,

  I’m really sorry, but I’m still not seeing much difference at all in the font between the browser, a phone emulator, or my mobile. It could be a caching issue on your phone? Would you mind clearing your phone’s browser cache?

  Let me know if that does it,
  Sage

• 

  moshekahol · Member · Oct 4, 2016 at 5:47 pm

  • Copy link

  in phone emulator its good… in real life phone no… I tried clearing the cache still same issue – the font is diffrent

• 

  moshekahol · Member · Oct 4, 2016 at 5:51 pm

  • Copy link

  also it seems that this code:
  
  @media screen {
  .widget-footer-area .widget-title, p, body, h1, h2, h3, h4, h5, h6, a, li {
  font-family: “Open Sans Hebrew”, sans-serif !important;
  }
  }
  makes the social networks logos blank
  can I fix it somehow?

  thanks alot sage for your patience

• 

  innisfreehomestead · Member · Oct 4, 2016 at 6:05 pm

  • Copy link

  No worries,

  This code will fix the logos if the above code is in there too (if it isn’t doing anything, can just take it out)

  .widget_wpcom_social_media_icons_widget .genericon {
  	font-family: 'Genericons' !important;
  }

  Are you able to check on a different phone to see if it still shows the same error? What type of phone/browser are you using?

  Sage

• 

  moshekahol · Member · Oct 4, 2016 at 6:14 pm

  • Copy link

  Hi sage the social logos still not showing and Im using chrome in samsong galaxy s4 also tried safare in two iphone 6s+

• 

  innisfreehomestead · Member · Oct 4, 2016 at 6:18 pm

  • Copy link

  Hello,

  Your code should look like this?

  @media screen and (max-width: 768px) {
  .widget-footer-area .widget-title, p, body, h1, h2, h3, h4, h5, h6, a, li {
  	font-family: "[font family here]" !important;
  }
  .widget_wpcom_social_media_icons_widget .genericon {
  	font-family: 'Genericons' !important;
  }
  }

  And I’m sorry, but I’m not too sure what else to say as I can’t recreate the issue on my end, it means I’m rather blind when trying to assess the situation. Would you mind creating a new topic outlining the different methods you’ve used to try and fix it so perhaps someone else might be able to see the issue and offer more assistance?

  Sorry about that,
  Sage

• 

  moshekahol · Member · Oct 4, 2016 at 9:01 pm

  • Copy link

  it seems like because it on google font I cant put it with css and because I doesnt have the font on phone I cant see it

• 

  innisfreehomestead · Member · Oct 4, 2016 at 9:20 pm

  • Copy link

  Right, that’ll do it. Looks like there is a solution, but it involves editing the site’s code, so not too much help in this situation http://stackoverflow.com/questions/25741042/google-fonts-not-loading-on-mobile

  Sorry I can’t be of more assistance!
  Sage

• 

  moshekahol · Member · Oct 4, 2016 at 9:24 pm

  • Copy link

  It says to put the @import as first line of css does this will fix it?
  I will try it tomorrow
  Is there any other way?

• 

  innisfreehomestead · Member · Oct 4, 2016 at 9:30 pm

  • Copy link

  Hey there,

  You can try, I think their solution though is referring to placing the import code in the theme files’ header, which isn’t accessible through a WordPress.com site.

  Sage