WordPress.org

Ready to get started?Download WordPress

Forums

Making Twenty Eleven iPad friendly (11 posts)

  1. tpt1405
    Member
    Posted 1 year ago #

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

    Hi
    Site: http://www.kit-center.com/
    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?
    Thanks!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  3. tpt1405
    Member
    Posted 1 year ago #

    Hi
    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.
    Thanks

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  5. tpt1405
    Member
    Posted 1 year ago #

    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?

  6. Shekhar
    Member
    Posted 1 year ago #

  7. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

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

    i.e. change this line:
    <div id="headbg-title" style="background: url(http://www.kit-center.com/wp-content/uploads/2012/08/Top-Banner-10.jpg); 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.

  8. tpt1405
    Member
    Posted 1 year ago #

    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;
        color:#365FE4;
    	font-style:italic;
    	text-transform:uppercase;
        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 {
    	color:#FFF;
        text-shadow:1px 1px 1px #000;
    	font-size: 13px;
    	letter-spacing:1px;
    	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
    Thanks

  9. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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.

  10. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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;

    see: http://pastebin.com/WRz0BNpQ

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

  11. tpt1405
    Member
    Posted 1 year ago #

    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.
    Thanks

Topic Closed

This topic has been closed to new replies.

About this Topic