I am working in a child’s theme.
Why does your child theme have all the parent theme styles in it?
You may need to be using @media queries in your CSS for device-specific CSS.
Because I copied the twentyeleven directory, and renamed it. So I’m working with the files within the renamed directory/theme. If I do have problems in a wp update, I can always go to the default theme of twentyeleven.
I looked at @media (max-width: 800px) in the style.css, there is nothing there that pulls the width back to 70%.
EDIT – sorry, cross posted …
I find it much easier to troubleshoot these kinds of issues when only the changes are in the child theme.
Are you familiar with @media queries? See starting on line 2251 in the original style.css file.
Are you using Firebug to help you with these issues?
Looks like you have some mark-up errors – which may be problematic –
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.marybalogh.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
The first bunch probably don’t matter but the last three should be fixed as it looks like they are structural.
I didn’t touch anything below the header.php. So I have no idea how to fix the last three.
Firebug doesn’t work on an ipad, neither does view source.
In the original header.php for twentyeleven, there is this line:
<body <?php body_class(); ?>>
notice, it has two >>. Is this correct? The second > shows up in my editor as a problem.
Those errors are in the header.php file – and not specific to an iPad. Looks like you added code inside the <head> section.
If you want to post the header.php code, I’ll look at it – but you’ll need to use a pastebin – http://pastebin.com/
Yeah, I said that. I said, I added elements in the header. The first element, the navigation, has the proper width, but the rest don’t follow. If your eye is quick on the ipad while it is loading, you can see that it sizes properly for a nano second, then everything sizes down 30%.
Validator says I have an extra </head>. I cannot see a repeat.
And the problem with the opening of
<body class=”home blog custom-background single-author two-column left-sidebar”>
would have to originate below, and that is exactly how it is in the default twentyeleven
<body <?php body_class(); ?>>
I can’t tell what’s going on with the php file – that’s why I offered to look at it, but this entire section of code should not be inside the <head> section of the page:
<div class="headermenu">
<div id="navigation">
<ul>
<li><a href="http://www.marybalogh.com">home</a>
</li>
<li><a href="http://www.marybalogh.com/about.html">about</a>
</li>
<li><a href="http://www.marybalogh.com/books.html">books</a>
</li>
<li><a href="http://www.marybalogh.com/contact.html">contact</a>
<ul>
<li><a href="http://www.marybalogh.com/links.html">links</a></li>
</ul>
</li>
</ul>
<a class="fb" href="http://www.facebook.com/AuthorMaryBalogh"><img src="http://www.marybalogh.com/graphics/fb.jpg" width="94" height="21" alt="" /></a>
<div class="newyork">New York Times <span>Bestselling</span> Author
<a href="http://www.marybalogh.com"><img class="mb" src="http://www.marybalogh.com/graphics/mblogo.png" height="48" alt="" /></a>
</div>
</div>
</div>
<div class="wrapper">
<div class="topbord"></div>
<div class="mainimg">
<img src="http://www.marybalogh.com/graphics/introwp.jpg" />
</div>
<div class="bottombord"></div>
<div class="leftcol">
<div class="new">New</div>
<div class="line"></div>
<div class="upcom">& Upcoming</div>
</div>
<div class="maincol">
<a href="http://www.marybalogh.com/counterfeitnotorious4.html"><img src="http://www.marybalogh.com/graphics/count-notor-crop.png" height="220" alt="A Counterfeit Betrothal/The Notorious Rake by Mary Balogh" /></a>
<a href="http://www.marybalogh.com/proposal4.html"><img src="http://www.marybalogh.com/graphics/proposal-crop.png" height="220" alt="The Proposal by Mary Balogh" /></a>
<a href="http://www.marybalogh.com/suitor.html"><img src="http://www.marybalogh.com/graphics/blankcov.png" height="220" alt="" /></a>
<a href="http://www.marybalogh.com/arrange4.html"><img src="http://www.marybalogh.com/graphics/arrange-crop.png" height="220" alt="The Arrangement by Mary Balogh" /></a>
</div>
</div>
It needs to be inside the body of the page.
http://pastebin.com/wRpq2pk1
If it is inside the body of the page, then everything will be too low in the page.
I think you’re not quite clear on basic HTML 🙂 – everything that is visible on a webpage goes inside the body tags – it doesn’t mean the “main section of a page.” Similarly – the <head> of a webpage is not the same as the header of a webpage. The <head> contains info for browsers, search engines and other stuff like that.
That pastebin seems to be locked – let’s just paste it here – but be sure to use the code buttons – click code before pasting it and then click code after it.
