Need help? Check out our Support site, then


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

  1. 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 eatmoregreenfood.com.

  2. 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

Topic Closed

This topic has been closed to new replies.

About this Topic