My header looks cut off on iPhone, can I fix this?

  • Unknown's avatar
    girleatsgreen · Member ·

    I just changed the header image size on my blog http://eatmoregreenfood.com/ (Fresh and Clean theme) but now my header is cut off when I look at my blog using my iPhone. Is there a way to fix this? Any help is appreciated!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    The header image in the Fresh and Clean theme is setup using the CSS “background” property. You can adjust it using the “background-size” property, but it’s CSS3 and so it’s not supported in all older browsers. You can use media queries to adjust the height at a couple major break points. Here is an example that will work in all up-to-date browsers:

    #branding {
	background-color: #2f2f32;
	background-size: contain;
	background-position: center;
}
@media (max-width: 650px) {
	#branding, .header-link {
		min-height: 216px;
	}
}
@media (max-width: 480px) {
	#branding, .header-link {
		min-height: 160px;
	}
}

    See this table for browser compatibility info:
    http://caniuse.com/background-img-opts

  • The topic ‘My header looks cut off on iPhone, can I fix this?’ is closed to new replies.