This is a super-quickie — when you’re developing a responsive site and your test-devices don’t seem to recognize the actual viewport dimensions (say, 768 x 1024) — the culprit is often a single <meta> statement:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I’m still in the process of scratch-building a responsive WordPress theme with Bootstrap and today decided to tackle the search widget styling. Well, to be completely honest I’m not quite scratch-building it — I’m adapting Automattic’s Toolbox theme, but I’m hand-rolling most of the responsive features.
If you’re not using Bootstrap, the process of styling the search widget is pretty straightforward — just modify (or define) the relevant CSS classes and you’re good to go. In order to use Bootstrap icons, however, it helps to restructure the the form input element. Since Bootstraps’ icons (from Glyphicons) are all stored in single sprite you can’t link directly to an individual icon in order to set it as a CSS element’s background property. Instead you specify the icon by CSS class name, which positions the element’s viewport over the selected part of the sprite.
The Bootstrap front-end framework is pretty cool and extremely easy to use, but it’s not always obvious that everything is working properly after installation. You’ll see the new style sheets right away, but testing the Javascript takes a little bit of extra effort.
Here’s an overview of the process:
Here’s a quick fix for WordPress theme developers who want jQuery delivered from Google’s CDN whenever possible, but also want a local copy to fall back on if the CND isn’t available. I’ve also included a couple of extra lines of code you can use to test your configuration.
Skip the background and jump to the code snippets
I was recently asked to provide a solution for a client whose site host was shutting down their email servers and needed a new webmail provider. The hosting company was throwing all of the business to Rackspace for $2.00 per email address per month with a five-address minimum. Ten dollars a month isn’t bad (I like Rackspace — I’m a satisfied customer), but the client was only using one address. Gmail, on the other hand, is no longer free for businesses, but at about $50.00 per year per address it was a better deal for my client. Not to mention the other advantages that come with it, including virus/malware protection and smartphone app ubiquity.