Ipad test for Twenty Eleven Header width

Try the pastebin again, I put it as unlisted.

https://pastebin.com/wRpq2pk1

Actually, I do know basic html, as you can see from my other pages. I just don’t know how to integrate my html into wp.

Do you suggest that I can put my all my elements in the page.php file?

No, if you want that in the header of every page, it has to go in header.php. Try moving the code you added just below the body tag line.

Make a copy of your header.php file as is before you change it.

So I would put it under
get_header(); ?>

and before

<div id="primary">
			<div id="content" role="main">

And that would appear everytime at the top of every post?

Sorry WPyogi, I’m not refreshing the page, didn’t see your reply…just wait.

I will try moving the code below the body tag line, but it is going to take me awhile.

Finally got my hands back on the ipad. I moved the code below, and got rid of the three errors in Validator. But I still have the same width problem on the ipad.

Great job on that! So now I see the issue on the iPad – the light brown “border” – it’s not really a border – it’s a background image of an empty element – so that’s not going to behave well.

<div class="bottombord"></div>

.bottombord {
    background-image: url("https://www.marybalogh.com/graphics/bottombordermainimg.png");
    background-repeat: repeat;
    height: 15px;
    width: 100%;
}

You might instead try removing both of the above, and adding a border here:

.mainimg {
    border-bottom: 10px solid #DFBB99;
    margin: 0;
    padding: 0;
}

In the ipad: That problem being the top and bottom border of the main picture do not expand all the way to the right. And there appears to be a gray background that is wrapping on the right. What is that wrapping on the right? What I wouldn’t give for firebug on an ipad.

Everything is fine on regular browsers.

Only problem is that it is a gradient border. If I do what you suggest then it is a solid color.

Do you see on the right side a gray block right above the top border?

And did you notice how the blog content below the pictures are all floating left when there is plenty of room on the ipad?

Almost got it. The key is to have a min-width for the first body css. I’m still fighting with the blogging part. Even though I tried to put a min-width in the #page or #main, or #primary, the blogging section did not fit in the ipad like it does in the computer browsers.