I used to use respond.js to make IE8 media query-friendly, but that script stopped working for me suddenly last week in WordPress. I still don’t know why, but after several hours of trying to fix it I realized that I really didn’t need to. Why was I worried about media queries in IE8 anyway? I really wasn’t – my real concern was that I was serving the mobile-first styles to that browser instead of the desktop styles.

But I’m using Sass – have been for a few months now, I love it – and Sass makes it easy to deal with that problem. It’ll help you create desktop styles, sans media queries, and serve those exclusively to IE8 via conditional comments.

I found some good references for how to do this, but I was so frustrated by that time (it was late and I’d been banging my head on the desk for an hour or two) I had a hard time getting my head around any of them. Once I finally got it, it was an ‘aha’ moment! I’m writing this post in hopes that I can make it super-easy for you to use this technique if you’ve recently had a frustrating time with IE8 too.

Compass and Breakpoint

You’ll need to use Compass and the Breakpoint extension for this tutorial. Breakpoint is a Sass mixin that makes it easy to write media queries – learn more about what Breakpoint does here.

Get Breakpoint going by first installing it:

Then if you’re starting a new project with Compass, you can require it now:

Otherwise you’ll need to add this line to your existing config.rb file in your project folder:

Finally, you’ll need to import the Breakpoint partial into your style.scss file (after you import Compass):

And you’re ready to go.

Creating the Media Queries and IE8 Fallbacks

In your utility partial, or maybe in a variables file, add a media query using Breakpoint. It will look like this assuming we want a min-width of 760px:

(Read the examples here if you want more details on the different kinds of media queries you can use).

Now normally you’d use this in your .scss files like this:

And that produces this compiled CSS:

But because we want to take care of old IE by not serving the media queries to it, you’ll first need to add this new mixin to your utilities file (wherever you’ve put the Breakpoint media queries):

And then instead of the @include snippet above, you’ll use this one in your .scss files:

So instead of ‘@include breakpoint($grande)’ you’re using ‘@include grande.’

If you look in the compiled CSS file you’ll see this:

And then, you’ll just need to enable the .ie8 class for IE8 by using this conditional comment in the head section of your site:

Now IE8 will see your width styles and you won’t need to worry about it not seeing the media queries anymore. Sweet!

What you’ll want to do is create one of the new mixins for each breakpoint you add – so if you have 5 breakpoints, you’ll have 5 new mixins.

This works so nicely, and no need for any special Javascript to force IE8 to be mq-friendly. I hope you found this tutorial helpful!

References:

 

I love Gravity Forms, it’s one of my go-to plugins for all WordPress installs. Last week a client gave me the form fields for a new form and some of them needed a word counter to limit words to 300 in textareas. I found two possible solutions for adding maximum word count in Gravity Forms after a bit of searching, but neither worked for me (not being a programmer, I didn’t know how to fix them). But my programmer friends at CodeGeek stepped in and came up with this solution.

Here’s the Javascript which is saved in /themes/mytheme/js/ (it could also be put in an HTML block within the form itself, but we may want to use it on several other forms so made it available site-wide):

Then in functions.php, call the script:

Then in the Gravity Form for fields that need the word count, add the class ‘els-word-count[300]’ in the Advanced tab for CSS Class Name. Change [300] as needed for the maximum words that can be added to that particular field.

Earlier this month I completed a redesign of a long-time client’s site that I first worked on in 2008. Because the client always has loads of great imagery (she’s an interior designer), we decided to incorporate full-screen backgrounds. I’m using the lightweight jQuery plugin Backstretch to handle the resizing.

I had some problems getting this working in WordPress, so I thought I’d post my process here. The main issue turned out to be that the version of backstretch.js I got from the demo site was not working; I have a correctly-functioning version here to download.

This little script makes images stretch to the full size of the browser window and resize as needed; it works fine down to IE7. I’d recommend an image width of no less than 1440px, this seems to work well.

Adding the Script

Add this to your theme’s functions.php, this registers and loads the backstretch.js script.

Then add this function, this one adds a backstretched image to individual pages which you can control. This one is placed in the footer to make sure it loads after jQuery.

I hope this helps someone else!

Coda Slider has been around for awhile, originally released back in 2007. But on a recent project, a client specifically requested we use it in a redesign. It’s actually really simple to customize and works well down to IE7 (although IE7 would require some CSS adjustments that I didn’t do for this tutorial. IE8 looked fine).

Coda Slider screenshot

The nicest thing about this slider is that it is basically a sliding wrapper for your HTML. You can add forms, text, images, anything you need into each panel. Other features:

  • Links and buttons are clickable.
  • You can use previous/next graphical arrows or text links.
  • You can use dynamic tabs, which is what I’ve modified in the demo.

The demo linked below shows the version of the slider I made for my client, and you can also get my customized CSS file. Download Coda Slider 3 from Github.

View Demo Get CSS Download Source

Installation

Installation is really simple, just add this to the ‘head’ section (it does need to be in the head, the slider didn’t work when I put it in the footer).

I’ve turned off arrows and turned on Dynamic Tabs; view the other advanced settings here: http://kevinbatdorf.github.com/codaslider/.

Customizing the Dynamic Tabs

The HTML element with class=”title” is used for the dynamic tabs. I used h2 and then hid this element in CSS so it won’t appear within the panel content. Then in coda-slider.css I modified .coda-nav like this to put the nav links down in the bottom right corner:

This is a very simple slider but the fact that you can use HTML in it is a big plus. It’s easy to customize too. Enjoy!

I’m using JJ NextGen jQuery Slider, one of my go-to slideshow plugins for WordPress. I don’t notice this issue normally, but today when I added the images I noticed there was a brief flash of each image before the transition effect; this was happening in Chrome. After looking around a bit I found a CSS suggestion that seems to work:

Here’s the original post.