Icons and Google fonts dissapearing in Chrome

Hi,

on the website dharmaebooks.org some icons in the header stopped showing up after recent updates. I can see them in Safari, but not on Chrome. What can I do about it? See attached screenshot. What can I do about it?

And also in some cases Tibetan letters used on that website do not display properly. I am using the same google font for Tibetan, English and Chinese and looks great on Safari, mobile browsers, my mac Chrome, but for some reason it gets corrupted on my friends mac Chrome. What could be the reason?

Thank you.

Hello There,

Thanks for writing in! It appears that you are experiencing some caching issues. I found out that you have installed a caching plugin W3 Total Cache, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Before testing your site, you must clear your browser too or use private browsing mode while testing your site.

Please let us know how it goes.

Hello RuelNel,

thank you for this. Yes, initially I forgot to clear caches after the last update and later everything looked ok on my computers, but my friends kept experiencing problems on Chrome. I think Chrome is not so good with refreshing sites.

I have also another question. I would like to reduce a space between posts on the blog pages. I have tried to change margin of the entry footer, but it didnt work. And additionally I have noticed that one of the posts has a smaller gap at the bottom, and this is one and only case like that on the whole website, which is really strange…

Could you tell me, how to reduce that space? The link is http://dharmaebooks.org/category/philosophy/

Hi There,

For styling and design matters, we can always use a browser developer tools to inspect and adjust how it looks. See this: https://screencast-o-matic.com/watch/cbX6Vp2INQ
The issue is because there’s a <big> tag added after the first blog post. It was conflicting with existing CSS. Your option 1 is add the following CSS fix:

.category .hentry {
    margin-top: 0;
}

The best recommended solution though is to remove <big> tag. That extra tag result to this issue. Instead of adding the CSS fixed, why not remove the tag that cause it. As you can see too on the screencast, icons and fonts are loading fine.

Hope this helps.

Thank you very much! It’s really kinf of you to make such an instruction videos for ignorants like me. I guess I will using those tool more often.

And just to solve 2 other small issue I have:

  1. How can I change the title of Search results page? Right now is says: Search results (which appears only in the breadcrumbs) and I need to change it.

  2. How to reduce padding around tags and categories, which show up in our entry footer. I mean the padding inside the box, around the text.
    http://dharmaebooks.org/category/philosophy/

thank you.

I just need to add a 3rd thing to the above list:

  1. On a single post like this: http://dharmaebooks.org/kamtsang-yabse/
    the left margin is a bit bigger than the right one. This is more apparent on the mobile view. I have change all the settings, paddings, margins, and even used Chrome inspector :slight_smile: but I cannot find anything that would cause it.

thank you,
beata

Youre Right you must after you have change your Content and purge all Caches press CTRL + F5 to Force the reload in Chrome. I Use a little Tool for that… CC Cleaner. A simple Cleaner Tool… But to clean all Browser Caches at once (Chrome, FF, Opera, IE, Edge) a fine little Helper.

@The-E-Blog

Thanks for sharing that tool.

@tashitendrel

  1. You may add the code below in your child theme’s functions.php file then change the text Your Own text with your own text.

add_filter( 'gettext', 'change_search_title', 20, 3 );

function change_search_title( $translated_text, $text, $domain ) {
    if ( $translated_text == "Search Results" ) {
        $translated_text = __( 'Your Own text', '__x__' );
    }
    return $translated_text;
}
  1. To reduce the padding, you can add the code below in PRO > Launch > Theme Options > CSS
.entry-footer a {
    padding: 5px;
}

Change 5px to adjust the spacing.

Hope that helps

Dear Paul,

thank you very much. It all works.

Could also look at the question 3? I do see a bigger margin on the left side of the individual posts pages. I think it may come from the fact that my general set up is with the sidebar on the right, which was then removed from individual posts in CSS. Is there some padding/margin added on the left in that set up?
thank you.

Hi,

Please check your Custom CSS code and try to fond the code that reads

.entry-wrap {
      padding-left: 2.5em;
      padding-right: 2em;
      padding-top: 2em;
      padding-bottom: 2em;
}

Change padding left to be the same as padding right.

.entry-wrap {
      padding-left: 2em;
      padding-right: 2em;
      padding-top: 2em;
      padding-bottom: 2em;
}

Hope that helps.

Ha! Thank you.

You’re welcome!

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