Header Logo

Yes, the easiest way is to ensure the maximum width is 320px or less.
If you specify a larger header, then you’ll need some device-specific media queries in your CSS. Without knowing what size your header is, here is a starting point with comments to resize the header image based on screen/device size:

/* Tablet Portrait size to standard 960 */

@media only screen and (min-width: 768px) and (max-width: 959px) {
	h1#site-title img {
		max-width: 768px;
	}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	h1#site-title img {
		max-width: 320px;
		margin: 0 auto;
	}
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	h1#site-title img {
		max-width: 480px;
	}
}

the header image is 940 px x 141 px, but i tried copy and pasting what you sent but It didn’t work, is there a certain place to put it in the css file?

Hi Dan,

Make sure you find the section in your child style.css file that describes changes to the page based on media query. If you haven’t changed anything out of the box you should have a line of code that looks like this:
@media only screen and (min-width: 320px) and (max-width: 480px) {

I pasted the h1#site-title img code under there.