I've been tinkering with the new WordPress Twenty Twelve responsive design template for a couple of other sites that I maintain. Given the increased use of mobile devices, such as phones and tablets, websites have to accommodate those smaller displays. Doing so with multiple style sheets for each possible configuration is possible but a testing and maintenance nightmare. Responsive design templates, where smart people figure out this stuff for us, are the easiest way to get to a good common solution.
The basic Twenty Twelve design, admittedly, is a bit bland. It has a quirk of placing the header image below the website title and tag line.
It also puts a box shadow, albeit faint, around the image.
I cloned the default template, moved the image above the title, and then set about to remove the box shadow. All that I'd need to do is reset the value of header-image in the style sheet.
img.header-image,
{
box-shadow:none;
}
WordPress offers a built-in style editor so that you can make changes to your design as you go.
In a simple case such as this, little can go wrong. If you are making a bunch of changes, however, you discover that it's easy for an extra character can wander in during a copy-and-paste editing session.
The code editor doesn't do syntax highlighting. As a result, if you leave an open curly brace:, the style sheet will fail silently and you've left with a simple change that doesn't work.
{
/* a bunch of code copied from elsewhere
that goes on for a while and then is missing a closing brace.
*/
img.header-image
{
box-shadow:none;
}
Tip: if you've spent what seems like an inordinate time tracking down a style change that's not working, copy your code into a proper editor and let it help you see what you're missing.
