Reponsive CSS on a new WordPress site

I have just finished converting my Mum’s church website from a horrible CMS to WordPress and it is now online at www.holytrinitysmethwick.co.uk.

It is my first attempt at a responsive layout and I think it is pretty good successful. Try it out, it should work on pretty much all devices, the only thing I have not yet done is optimisation for the iPad retina display.

Whilst reading up on creating responsive designs I found a snippet of CSS that has been incredibly useful and I thought I would share it. Unfortunately I can not remember where the original idea was found so can’t give proper credit, sorry (UPDATE: Code was from Johan Brook’s Blog johanbrook.com/design/css/debugging-css-media-queries/)

If you do not know too much about responsive design then in a nutshell it uses some special html to detect the width of the browser and include a style sheet dependant on that.

The two lines above will include the stylesheet 480.css if the screen is at least 480px and it will include both 480.css and then 600.css if the browser is more than 600px wide. You include a base style before those that defines font, colours etc. and extra ones at various size points where you want to change things.

The Holy Trinity Site has several points where the header logo is resized, the navigation changed and the % widths of the columns is adjusted. Try resizing the browser when you are on the site to see them change.

Now, the really useful snippet of code is

.user-admin::before{
    content: "Media query (768 < 979) fired 768.css";
    font-weight: bold;
    display: block;
    text-align: center;
    background: rgba(255,255,0, 0.9);   /* Semi-transparent yellow */
    position: absolute;
    top: 2em;
    left: 0;
    right: 0;
    z-index: 99;
}

If I am both logged into WordPress and using an adminstrator account then I will see a yellow bar at the top of the screen that tells me which is the highest width of stylesheet included in the page. This code is at the top of all the style sheets with the text slightly adjusted. As I adjust the width of the browser the message will change. If I think something looks wrong at that width I know exactly which stylesheet to make the adjustment on.

UPDATE: The theme is built on Boilerplate wordpress.org/extend/themes/boilerplate and the style sheets are based on 320 and Up stuffandnonsense.co.uk/projects/320andup/ still not sure where found the ::before idea