gbacofc

Of course!!!! I should have thought of that as a solution. Which works perfectly! Thanks

Hi Steven

OK, so sorry to have bothered you with this – when I went back to the browser the cache had cleared! Icons appearing correctly.

Thanks
Susan

Hi Steven

We have Connections installed on both of our websites and on GrandBendTourism.com the social media icons show as coloured blocks only without any visual definition and yet on GrandBendChamber.ca the social display just fine.

https://www.grandbendtourism.com/stay/directory-of-accommodation-providers/
https://grandbendchamber.ca/membership-directory/

Both sites are running the same versions and I’m viewing them in the same browser.

Both sites run WPRocket, Cloudflare and essentially the same plugins.

What can I do to fix this situation?

Thanks, Susan

Not sure how this topic is “resolved” – there’s no solution posted and I’m having the SAME problem. Cannot find where the code for the twentyfifteen-style-inline-css.

Have checked code in header – but it’s not obvious.

What was the solution?

Font size is defined twice to accommodate different screen resolutions and sizes – this is especially important for response css.

I didn’t like the way 2015 font sizes were setup either and adjusted them all according to their relationship to base font.

Just so you know, most browsers base font is 16px – 2015 css contains a statement about adjusting to 62.5% of this in order to rescale everything on a base of 10px – however this method is more convoluted than it needs to be – just adjust all sizes to a base of 16px. In other words, 16px = 1em = 100% – which is the browser default. See https://pxtoem.com/ for handy chart.

So if you want title text as 32px – that’s double the size of your base 16px – therefore font-size: 2rem; or 200%. This will cascade nicely across multiple screen sizes (mobile devices etc).

I always use REM – relative to base size stated in outset of CSS.

There’s many articles out there on this subject