Responsive header on Modern Blogger Pro

[ddknight]

Hello,

I've hit numerous threads here about a mobile responsive header for Modern Blogger Pro. I followed the steps on https://prettydarncute.com/2014/10/genesis-full-width-header-tutorial-option-2/ . Everything looks fine except on the smaller screens sizes 240 and 320. I'm using this site to check http://www.studiopress.com/responsive/?http://responsive-header-demo.designsbynickthegeek.com

Could someone throw me an idea why the two smallest screens don't resize the header image? The site is http://www.heroesinuniform.com

thanks for any help!

Ray 🙂

http://www.heroesinuniform.com/

[Carlo]

Hi Ray. Find this code in your theme stylesheet:

.header-image .site-title > a {
	background-size: contain !important;
	display: block;
	height: 164px;
	margin: 0 auto;
	width: 360px;
	text-indent: -9999px;
}

Replace it with this:

.header-image .site-title > a {
	background-size: contain !important;
	display: block;
	height: 164px;
	margin: 0 auto;
	max-width: 360px;
	text-indent: -9999px;
}

---

Comprehensive, easy to follow Genesis documentation

[ddknight]

Thanks Carlo you rock!! 🙂

Ray

[Author]

Posts