Support » Themes and Templates » Making Twenty Eleven iPad friendly

  • [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    Ive used the Twenty Eleven (child) theme to do this site, but find that when I view the site on an ipad, the top banner takes up the full width of the screen, but the rest of the site only takes up about 2 thirds of the screen width.
    I added this code to the bottom of my style sheet to try and resolve the problem, but it’s still the same.

    /* =Responsive Structure for narrow screens
    * to keep min width and sidebar
    -------------------------------------------- */
    @media (max-width: 800px) {
         #page {
           min-width: 500px;
    /* keep the sidebar - for right sidebar */
        .right-sidebar #main #content {
            margin: 0 29% 0 1%;
            width: 70%;
        .right-sidebar #main #secondary {
            float: right;
            margin: 0 1% 0 1%;
            width: 24%;
    /* keep the sidebar - for left sidebar */
        .left-sidebar #main #content {
            margin: 0 1% 0 29%;
            width: 70%;
        .left-sidebar #main #secondary {
            float: right;
            margin: 0 -1% 0 2%;
            width: 24%;
    /* correction for 'showcase' template */
        .page-template-showcase-php #main #primary.showcase {
            float: right;
            margin: 0 2% 0 2%;
            width: 96%;
        .page-template-showcase-php #main #primary.showcase #content {
            margin: 0 6% 0 6%;
            width: 88%;
        .page-template-showcase-php section.recent-posts {
            float: right;
            margin-right: 0pt;
            margin-left: 31%;
            width: 69%;
        .page-template-showcase-php #main .widget-area {
            float: left;
            margin-right: -22.15%;
            margin-left: 0pt;
            width: 22.15%;
    /* correction for singular posts/pages without sidebar */
        .singular #main #content {
            margin: 0 8% 0 8%;
            width: 84%;

    Anyone have any suggestions that might help?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Andrew Nevins


    Forum moderator

    You’ve set a width of pixels (1000) to your banner. Try replacing this with %(100);

    Thanks for the reply!
    I have tried this but haven’t been able to get it right…
    Where exactly am I suppose to change it? In the stylesheet? Or somewhere in header.php? When I change it to 100% in index.php the whole thing seems to crash or something.

    Moderator Andrew Nevins


    Forum moderator

    Have you a Child Theme or Custom Style/CSS plugin?

    Not quite sure actually.
    It is definitely a child theme, then I go to Appearance > Editor, and edit the files in there.
    Does that make sense?

    don’t use fixed width elements in an otherwise responsive/fluid design;

    i.e. change this line:
    <div id="headbg-title" style="background: url(; width:1000px; height:385px;">

    if you need a larger than default header image, change the header image size in functions.php of your child theme;
    you should be able to find the code for this by using forum search.

    Hi alchymyth
    I can’t find that line anywhere…
    This is the header section in my stylesheet:

    [please read and apply the forum guidlines for posting code]

    /* Header - need to add header a:hover color to the title.
    ----------------------------------------------- */
    #headbg-title a:hover
              { color:#505052;}
    #branding {
    	border-top: none;
    	padding-bottom: 10px;
    	position: relative;
    	z-index: 2;
    #site-title {
    	margin-right: 270px;
    	margin-left: -36px;
    	padding: 4.0em 0 0;
    #site-title a {
        font-family: 'Oswald', sans-serif;
    	font-size: 46px;
    	font-weight: normal;
        text-shadow:0px 1px 0px #000;
    	text-decoration: none;
    #site-title a:hover,
    #site-title a:focus,
    #site-title a:active {
    	color: #505052;
    h1#site-title a:hover { text-decoration: none; }
    #site-description {
        text-shadow:1px 1px 1px #000;
    	font-size: 13px;
    	margin: 0 270px 0 -35px;
    #branding img {
    	height: 385px;
    	margin-bottom: -7px;
    	width: 1000;

    When I change “width: 1000;” to 100%, it doesnt seem to make a difference

    I guess, the line would be in header.php (?)

    the posted section has the width within inline styles, which would overpower any edits to style.css.

    just downloaded the ‘blue splatter’ theme, and unfortunately, that is some badly designed edit to the theme code.

    possibly try to replace the bad code with some code from the original default header.php;


    you will likely need to do some additional formatting to get the same look as before.

    Thanks alchymyth, it looks 100 times better already!
    I’m still having a problem with the slider on the home page as well as one widget (both of which I had to choose a fixed width for when setting them up (it doesnt work when I set width as 100% as it then displays as 100px, which is obviously too narrow.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Making Twenty Eleven iPad friendly’ is closed to new replies.