Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
This CSS code is for a DWB screencast where I show how to make your Logo Image responsive, without the need for multiple images.
/* HTML5 5th @media query trigger point */
.site-header {
min-height: 80px;
}
.header-image .site-header .wrap .title-area {
width: 400px;
height: 80px;
background-size: 400px 80px;
}
/* HTML5 6th @media query trigger point */
.site-header {
min-height: 60px;
}
.header-image .site-header .wrap .title-area {
width: 300px;
height: 60px;
background-size: 300px 60px;
}
/* Pre-HTML5 5th @media query trigger point */
#header {
min-height: 80px;
}
.header-image #header .wrap #title-area {
width: 400px;
height: 80px;
background-size: 400px 80px;
}
/* Pre-HTML5 6th @media query trigger point */
#header {
min-height: 60px;
}
.header-image #header .wrap #title-area {
width: 300px;
height: 60px;
background-size: 300px 60px;
}

Hello Eric,
Just now watched your screen cast at http://dynamikdocs.cobaltapps.com/article/146-how-to-make-your-logo-image-responsive. Great explanation. I signed up with GitHub and would like to somehow keep all such helpful DWB CSS in my GitHub area. Is this OK with CobaltApps?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment