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

  • Author
  • #897177

    I just changed the header image size on my blog (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


    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:

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