WordPress Responsiveness

Making a static site responsive isn’t too difficult thanks to advancements in media queries, but getting WordPress to bend to the will of all devices is another story.

This is a custom WordPress theme based on Chris Coyier’s BLANK-Theme, the basic framework I use on pretty much every custom WordPress theme I make. The main page layout is standard XHTML/CSS, but the responsiveness is where I had some fun.

Responsive WordPress Images

After reading “Responsive Web Design” by Ethan Marcotte, I realized this site needed to be responsive. As I worked with the media queries I found issues in making a WordPress theme responsive. Thumbnail images would not respond to my sorcery. That’s when I realized that WordPress tells your images what size they should be. At least until I found this snazzy piece of code.

// Override Custom Post Image Size (Leave empty to use default theme settings)
$imgheight = '';
$imgwidth = '';

After sticking this into the pages where I add images, the image width defaults to whatever you have put in the CSS. I’ve found that this can be a bit finicky, so if you can find a better way to successfully make image sizes null, let me know in the comments below.

Fitvid.js To The Rescue

Another issue was making videos responsive. Thankfully as I was about to use a lightbox for all videos, I came across fitvid.js.

Fitvid.js takes the if out of iframe video support. Not literally, but using this juicy slice of JavaScript prevents you from having to wonder if your videos will resize properly. You should check out the main site, but For reference here is the main JavaScript snippet needed to get the videos to resize properly.

So that’s a little taste of what makes this site work. I’ll most likely write more as I tweak my site and trim off some of the fat.

Until then check out ‘Don’t Be a Jerk‘ and ‘Rejection Can Be Fun‘.

Notify of
Newest Most Voted
Inline Feedbacks
View all comments
javier lo
9 years ago

<img src="” />

This little friend of mine should do it. The only problem is it is only for featured image.

9 years ago

I am having an issue getting this to work on my custom postype thumbnails, which I am implementing via the featured image option. Any ideas on what I could be doing wrong here?

Thanks in advance!
– j

John Hartley is a Director of Product Engineering at Beam Dental in Columbus, OH. With 5+ years of leadership experience he has worked in startups, agencies, and began his career as a freelance Front End Developer. Always looking to iterate, this blog is a place for him to share his knowledge as well as hone his craft, challenge assumptions, and build a strong base of leadership and management knowledge. Connect with him on LinkedIn

Would love your thoughts, please comment.x