Responsive Images — The Techniques

There’s more than one way to skin a cat, the same goes for responsive images. Don’t get overwhelmed, here’s the top ways to make your images responsive.

Like with most things in the development arena, there’s more than one way to skin a cat. In the case of CSS responsive images, the story is no different. In this post we’ll go over the top techniques for making responsive images. Continue reading “Responsive Images — The Techniques”

Styling File Inputs — The Best Way

Google ‘styling file inputs’ and you’ll find dozens of techniques on how to theme file inputs. The better, most optimized, semantic and accessible way to style <input type=”file”> is just with a little CSS and <label>.

I’ve spent countless hours styling file inputs using a number of different techniques out there. End result is always the same — frustration. A common (IMO worst) technique to style file inputs is faking buttons with extra, non-semantic HTML, CSS and JS. Dirty, dirty, dirty, not to mention the drawbacks for usability and touch. Don’t fret! There is a better way.

See the Pen Beautiful CSS-Only File Inputs by Ben Marshall (@bmarshall511) on CodePen.

View Demo View Code

Styling clean, semantic and accessible upload buttons requires two things: CSS & <label>. I’ll go over the technique and show how a little extra JS (optional) can enhance the UX. The input file CSS possibilities are limitless once you understand how this technique works!

Continue reading “Styling File Inputs — The Best Way”

Responsive Iframes — The Right Way (CSS Only)!

Building responsive iframes can be frustrating. Don’t let an iframe break your beautifully laid out responsive site. Learn how to build responsive iframes the right way with just a few lines of CSS.

“Responsive Iframes — The Right Way (CSS Only)!” was originally published on the 19th of March 2014, last updated July 24, 2018 to reflect emerging trends.

Responsive iframes are a cinch! Jump start using the responsive iframe CSS (using intrinsic ratios) shown below to make your iframe responsive. You’ll never ask ‘how to make iframe responsive’ again!

View Demo View Code

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
The responsive iframe CSS above demonstrates how to transform a normally fluid iframe into a responsive iframe. Just be sure to update the padding-top property to reflect the aspect ratio to make iframe responsive.

Continue reading “Responsive Iframes — The Right Way (CSS Only)!”

WordPress lostpassword_errors Filter

Unlike the registration_errors filter, there’s not a lostpassword_errors filter… but there is another filter you can use instead!

I spent a couple of hours of searching and another one debugging attempting to find a WordPress filter for errors like the:

ERROR: Invalid username of email.

that appears on the lost password page. Since there’s a registration_errors filter, I thought lostpassword_errors or something close to it would be available. Nope. Continue reading “WordPress lostpassword_errors Filter”

Facebook PHP SDK — a simple guide!

Bring the power of Facebook to your application using the Facebook PHP SDK — a powerful library allowing you to retrieve user information, publish to profiles, enable Facebook registrations, logins and more!

This post was originally published on May 30, 2014 and last updated March 9, 2018.

The Facebook PHP SDK is a powerful library that allows developers to easily integrate Facebook login and make requests to the Graph API. In this post, we’ll go over how to install, initialize and perform operations like posting to timelines, user registrations, logins and more!
Continue reading “Facebook PHP SDK — a simple guide!”