Logo – iPad Portrait issue

[Eddie May]

Hi,
I’m having an iPad portrait display issue – my logo is not aligning with the main content area.

http://www.carterdesign.co.uk/site

Any pointers?

Thanks,
Eddie

[Bill Robbins]

Eddie,

I believe I can help out, or at least get you going in the right direction. The reason why they aren’t lining up is the content area is 60% of the width of the wrapper. The logo is area is the same width as the wrapper.

You can use this CSS snippet to set them up so they will equal:

@media only screen and (min-width: 768px) and (max-width: 991px) {

	#logo,
	#text-logo {
		float: none;
		width: 90%;
		margin: 0 auto;
		overflow: hidden;
		padding-bottom: 10px;
		padding-top: 10px;
	}
	
	#logo h1 {
		float: right;
		width: 68.4%;
		height: auto;
		margin: 0;
	}

}

If you run into trouble, let me know,
Bill

[Eddie May]

Hi Bill,
Thanks for the prompt.

That sorted the homepage but not the other pages. After some head scratching & Firebugging I noticed (doh!) that on the home page the logo is wrapped in a [h1] but on other pages its in a [p]. Do you know why this is (is it something with the way I’ve set it up or something)?

Home Page:
[div id=”logo”][h1]…]/h1][/div]

Other Pages:

[div id=”logo”][p]…[/p][/div]

Anyway, thanks for your prompt & always helpful support – much appreciated. Glad you like the site but I can’t take much credit I’m afraid, I just cut up the psd, etc!

Cheers,
Eddie

[Bill Robbins]

Eddie,

You are correct. The inside pages are wrapped in a <p> tag for search engine optimization. The home page we want the site title to have the h1 tag, but on the inside pages we want the page title to, so that’ why it’s different.

Try replacing this:

#logo h1 {
		float: right;
		width: 68.4%;
		height: auto;
		margin: 0;
	}

above with this:

#logo h1,
#logo p {
		float: right;
		width: 68.4%;
		height: auto;
		margin: 0;
	}

See if that works better.

[Eddie May]

Hi Bill,
Thanks for your efforts – it’s now sorted for iPad. However, ….!

The display is not right for the Nexus 7 in landscape on sub pages. I’ve tried to target Nexus by using media queries but doing so also screws up the iPad! Using http://responsejs.com/labs/dimensions/ I get the viewport width as being 961px.

Doing media queries for that interferes with the iPad – its probably a simple issue with my #logo p declaration but I can’t see it!

Any help much appreciated.

Thanks,
Eddie

[Bill Robbins]

Eddie,

Another alternative might be to replace the

<logo>

tag in the header.php file with the content wrap that's used below it. It might look something like this:

That way you're not trying to match the sizes of two different containers. I added an ID to the logo section to make it different in case you need to apply styles to it only.

Perhaps that would help even things out.

Bill

[Author]

Posts