Skip to main content

Posts

Showing posts with the label css

Straight-forward Pure CSS Social Icons

This is a chunk of code I use on a lot of sites.  It uses Font Awesome to supply the fonts, but everything else is handled via CSS. Font Awesome To start, you'll need a Font Awesome account / link to use to import your font files (which will be used to show the social network icons). They will provide you with a script link you can put into your header.php, load into your functions.php and/or download locally and link locally...really, it's up to you how you load the script. The HTML code is just a simple list: <ul class="social-media-icons"> <li><a class="facebookBtn smGlobalBtn" href="https://www.facebook.com/yoursitehere" target="_blank"></a></li> <li><a class="linkedinBtn smGlobalBtn" href="https://www.linkedin.com/in/yoursitehere" target="_blank"></a></li> <li><a class="twitterBtn smGlobalBtn" href="https://twit...

Proper Viewport Scaling on iPad and iPhone

So, this is a little silly and I'm a little embarrassed to say that I've spent far too much of my time on this issue. I had a multi-page site that wasn't displaying correctly on my iPad.  One page would look great, but the next would have the top menu cut off on the right and everything would be slightly zoomed in. I realized that it was a scaling issue, but for all the experimenting I did with the meta viewport tag , I couldn't get it to work. Then I thought of something...some pages didn't have as much content as the others.  The longer pages were displaying great, it was the pages short on content that weren't.  So, I went ahead and set a min-height for each page of 1050px (I figured it had to be a little larger than the 1024px portrait height of an iOS device) and voila, it worked. All the pages showed correctly.  Now, I fully admit that this is most likely a hack that isn't considered the "proper way", but I am absolutely open to sugge...

CSS Border Radius Generator

Thanks to the crafty work of Jacob Bijani over at www.border-radius.com , a lot of us web developers can breathe a sigh of relief when it comes to sorting out css curved borders across all supported browsers.  Let's face it, anything to make our lives easier is a good thing. Quickly enter your desired corner dimensions and watch the code get generated on the fly.