WordPress.com Forums » Topic: Header on Ipad/Mobile

designsimply on "Header on Ipad/Mobile"

designsimply — Thu, 25 Oct 2012 19:13:40 +0000

now the header is off to the left on the ipad

Adding this will probably do the trick when it comes to centering the background header image on an iPad:

.site-header .site-title-wrap {
	background-position: top center;
}

Note that you may need to fidget with the numbers/settings until it looks right to you. I noticed header font looked too big on an iPhone, so here is the whole CSS edit with a few more adjustments added that you can play around with:

@media only screen and (max-width: 920px){
	.site-header .site-title-wrap {
		background-size: contain;
		height:inherit;
	}
}

@media only screen and (max-width: 480px){
	.site-header .site-title-wrap h1 {
		height: 70px;
	}
	.site-title-wrap h1 a {
		display: block;
		line-height: 70px;
		font-size: 32px !important;
		font-weight: bold !important;
	}
}

.site-header .site-title-wrap {
	background-position: top center;
}

designsimply on "Header on Ipad/Mobile"

designsimply — Thu, 25 Oct 2012 19:11:42 +0000

If I select the CCS tab under "custom design" I get a blank code page. do I enter it there and then select "save style page?"

That shouldn't happen, but I see later that you mentioned using an iPad and there was a bug for iPad CSS editor previews that was fix. The update probably went in during your testing before. Let me know if you have any troubles with that going forward.

bmarcogliese on "Header on Ipad/Mobile"

bmarcogliese — Mon, 15 Oct 2012 13:30:53 +0000

ok, so i read through the CSS customization tutorial, copied this into the style sheet, saved and now the header is off to the left on the ipad(?) anything else i can try? thank you :-)

bmarcogliese on "Header on Ipad/Mobile"

bmarcogliese — Mon, 15 Oct 2012 12:59:07 +0000

cannot thank you enough for your help! here is the problem...i'm not quite sure where to add this code. If I select the CCS tab under "custom design" I get a blank code page. do I enter it there and then select "save style page?"

confused as to where to access the theme code so that I may revise per your recommendations. Again, thank you, thank you for your reply!

designsimply on "Header on Ipad/Mobile"

designsimply — Sat, 13 Oct 2012 16:33:53 +0000

This might be better:

@media only screen and (max-width: 920px) {
	.site-header .site-title-wrap {
		background-size: contain;
		height: inherit;
	}
}

@media only screen and (max-width: 480px) {
	.site-header .site-title-wrap h1 {
		line-height: 60px;
	}
}

designsimply on "Header on Ipad/Mobile"

designsimply — Sat, 13 Oct 2012 15:10:44 +0000

I reviewed http://brookes-nook.com/ on an iPhone and an iPad, and I see what you mean about the header but the rest of the site formatting looks good to me.

Try adding this to make the header fit a bit nicer, and let me know if it looks good.

.site-header .site-title-wrap {
	background-size: contain;
}

It's possible we'd need to add some additional rules to make the height fit better too.

bmarcogliese on "Header on Ipad/Mobile"

bmarcogliese — Wed, 10 Oct 2012 21:19:57 +0000

The formatting of my header (and for my site in general) is not proper when viewed from an iphone, and especially from an ipad. This is not great considering a majority of people now access the internet through those two forms. I've tried reading a gazillion articles on how to fix, but am hoping someone can guide me through. Thanks in advance to anyone bored enough, or angelic enough, to help!

Assistance would be GREATLY appreciated.

Theme: Just Desserts.