font rendering issue in safari - css

Hi currently i am working on one WordPress themes in which front page of theme look good on all browser but in safari when we go to any other page header of page which have heading ,tagline and on right side having small menu and contact detail goes wired means it's font goes more lighter than front page i need all consistent on all pages.
theme URL is here
please see in safari
Frontpage - http://demo.wpgothemes.com/minn
you can see any other page e.g -http://demo.wpgothemes.com/minn/page-layouts/3-col-content-center/
Thanks
Vishal

It solved by just adding
body
{
-webkit-font-smoothing: antialiased;
}

Related

Hiding URL from the footer using css

When am printing a page from internet explorer v11, the printed document contains the URL of the webpage which the client doesnt want to appear. I have searched various forms and articles for the solution but the effort gone in vain.
Is there a working solution to hide the url in IE 11?
Try it by css:
#print {
#page :footer {
display: none
}
#page :header {
display: none
}
}
This is often a browser-specific print setting.
See Firefox and Internet Explorer examples. The client will have to adjust their print settings in IE11 before printing the page.
sorry, we cant control the print job header and footer with css nor with Javascript, its browser and printer setting,
http://www.mintprintables.com/print-tips/header-footer-windows/
If the header and footer is a part of your web page than you can try to control it using CSS code.
Here, you want to access and change the IE browser page settings for print using code which is not possible.
User have to change their browser page settings for print and need to remove URL manually is only the way.

Font Awesome icons no longer showing on page

I am working on a site, and just recently, the social media icons are no longer appearing on the site, they are just boxes. The site in question is sccds.org.
They were working a couple days ago, and nothing was updated (It's a wordpress site) when they just suddenly stopped showing up. The link used to serve the css is the same as it used to be, the icons are the same with the same classes, the plugin used to display the icons is the same, everything is the same, but for some reason, the icons themselves will no longer display.
There are no errors in the console and nothing is failing to load, so I am at a loss as to how the icons can just suddenly no longer show up. Any help with this is appreciated.
First thing to check is your styles. Some of the icons require a particular font-weight. Recently, I added a rule to my stylesheets which broke several icons I was using (and they were being rendered as boxes).
.fas, .far, .fab { font-weight: normal; }
Once I removed that from my css, the icons showed up properly.

Missing random icons in Wordpress

I was working on my page, when random icons on my page went missing, while others are displaying fine.
The icons that are missing are both some of Wordpress standard, some of Font Awesome and some from different plugins. Same services got some showing as well, even on same pages as showing here:
Screenshot that shows some missing and some showing icons.
The link for my website
The issue came after i saved a edit on the index page, but the mistake are going on all pages from here.
What have i done wrong and what can i do for avoid the issue?
Thanks
Add this style in your active theme style.css
.fa {
font-family: 'FontAwesome' !important;
}
font-family is overwrite in your theme.
Try adding Font Awesome on you header this may solve that
I check the tag and it should an if statement for IE9

wordpress woocommerce with wp touch the site is not coming mobile friendly and there is no image on carousal preview and next

I have 2 questions
how come does my css resets after using certain css code?
how come products other then on homepage is not showing in the middle on mobile
website url : (www.thevapeboys.co.uk)
I have a wordpress website with woocommerce installed I wanted to make mobile friendly so I installed a plugin called wptouch, I have added certain css values to it to make it more mobile friendly these are
these css script only triggers when someone from a mobile goes on the website
but the problem is I have carousal on the website which has next/preview and it dosent show the arrows for it so I tried adding this code to the css
.owl-nav .owl-next::before {
content: ">";
}
.owl-nav div::before {
content: "<";
}
I tried it with firebug and it looked all friendly but when i actually put the code in it resets all the other css values that i did before.is there a way it works without resetting the other css values because it works with firebug
when I go on shop the products and the font is coming on the left now i m not sure how to make them position all of them in the middle so it could be more mobile friendly.
Unfortunately the custom css file is first in line, which means it won't ever override anything. CSS works with a cascade meaning the last duplicate class wins out, according the browser. Put your custom css last and it will override.
You shouldn't need the WP Touch plugin as your theme is already responsive, in fact it's duplicating the mobile menu so I'd turn it off. https://woocommerce.com/storefront/ (search for the "Responsive" description box for proof of this)
Do the following to replace the icons, you need access to your custom javascript file: https://stackoverflow.com/questions/31605932/how-to-make-a-owl-carousel-with-arrows-instead-of-next-previous

CSS rollover working on one page, but not another

I'm replacing all Fireworks-generated table-based rollovers on my site with CSS rollovers; I've so far had luck with my menu bar, which works properly on each page on the site.
Today I tried to update my main page's marquee (div id="titlemain" on theapplenewsreel.com), and while the rollovers seem to work fine on the staging page where I designed and tested said element (theapplenewsreel.com/titlemain.html), the code refuses to work when I integrate it into the page where I intend to use it. I've checked the link to the stylesheet; it points to the exact same CSS file. Can anyone suggest a reason why the marquee's share links don't update on the index.html file?
Try updating the CSS to include px in the background position numbers:
#titlesharefb:hover {
background-position: 0 -80px;
}

Resources