WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
[Theme:Twenty Eleven]Sidebar gone on frontpage when using mobile (44 posts)

  1. atrais
    Member
    Posted 3 years ago #

    I tried with my iPhone to visit my test-blog with Twenty Eleven theme but I noticed the sidebar is gone on the frontpage, how can I enable it?

    Edit: Eh never mind, the sidebar is broken and ends up way below.

    Is it supposed to be like that?

  2. garnikma
    Member
    Posted 3 years ago #

    +1

  3. desean
    Member
    Posted 3 years ago #

    I believe it is by design, so that the theme can double as a mobile theme as well.

    See the WordPress 3.2 video at http://wordpress.org/news/2011/07/gershwin/ and watch out around 1 min 30 seconds onwards, and you will notice the sidebar is missing for the mobile phone.

  4. hidden driveways
    Member
    Posted 3 years ago #

    It's a bummer. I think twentyten looked much nicer on my iPhone than twentyeleven does. The navigation bar takes up nearly the entire screen (and acts more like a navigation block). The search bar covers my header image nearly completely, and it loads "zoomed out" on the iPhone, so the writing isn't utilizing the full screen, and an empty pho-sidebar is exposed on the right side of the screen:

    http://www.sam-mallery.com

  5. vickie
    Member
    Posted 3 years ago #

    Not looking good on an iPad either - the menu wraps around onto 2 lines

  6. rewozz
    Member
    Posted 3 years ago #

    Well the searchbox doesn't look at all like it does in the video. It's huge on the iPhone.

  7. MrSatro
    Member
    Posted 3 years ago #

    Hi

    I seem to be having the same issue on iPhone as Sam does. (www.boetiekboudoir.be)

    Strange thing is that untill a couple of days it looked good on iPhone. my other site (www.tastendemens.be) still does. All of a sudden boetiekboudoir.be turned all to the left side on iphone.

    So it must have been something I did. I reinstalled original twenty eleven theme, but still view is terrible on iphone

    anyone any idea how i can fix this?

    t

  8. Samuel Coskey
    Member
    Posted 2 years ago #

    For me, the sidebar jumps down to the bottom when the window is very narrow. This seems like a smart idea, but it is not good for the iphone... I think people would rather scroll right a bit to see it.

    Any help disabling the "sidebar jumps to bottom" "feature"?

    E.g.: bikepirates.com

  9. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    @sgcoskey

    a partly solution to be added to the end of style.css of the child theme:

    /* =Responsive Structure
    ----------------------------------------------- */
    @media (max-width: 800px) {
    	/* keep the sidebar - this edit is for right sidebar only */
             #page {
    	   min-width: 500px;
             }
    	.right-sidebar #main #content {
    		margin: 0 29% 0 1%;
    		width: 70%;
    	}
    	.right-sidebar #main #secondary {
    		float: right;
    		margin: 0 2% 0 0%;
    		width: 24%;
    	}
    }

    (limits the width to a minimum width; only for theme options layout: 'content on left'; only tested with resizing the browser window - not tested with any small devices)

  10. Samuel Coskey
    Member
    Posted 2 years ago #

    @alchymyth

    Thank you! The point is that I didn't know you could do it with css so I was looking in functions for some kind of crazy javascript to kill. But it was in the style all along.

  11. eXisTa
    Member
    Posted 2 years ago #

    @alchymyth
    Your peace of CSS is awesome I'm so glad it works for the iPad.
    Thanks a million!

  12. annaselway
    Member
    Posted 2 years ago #

    hi I have an issue on my site I would be very grateful for any advice:
    http://www.annasdesk.com.

    when viewed on an ipad the main horizontal navigation is too wide and appears over two lines - the problem is it is hard to see the links on the second line as they are white. Is there anyway other than changing the link colours to fix this? Ideally I would like the black background of the menu bar to expand to the second line.

    Thank-you

    ps the code above to show the sidebar is fab,ty

  13. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    @annaselway
    its caused by the edit you made to the style of #acccess:

    #access {
    	background: #222; /* Show a solid color for older browsers */
    ...
    ...
    	margin: 0 auto 6px;
    	width: 100%;
    height:60px;
    
    }

    change to min-height:60px;

  14. annaselway
    Member
    Posted 2 years ago #

    @alchymyth

    thank-you very much - I thought it was going to much more complex :-)
    i still have a lot to learn.

    have a great day

  15. thiefhunter
    Member
    Posted 2 years ago #

    Thanks for the sidebar/iPad fix, alchymyth. It's perfect.
    http://thiefhunters.com

  16. thiefhunter
    Member
    Posted 2 years ago #

    Just revised my blog and started a child theme. The code in the child style sheet isn't working. Back to no sidebar in iPad. Any ideas or suggestions? Thanks very much.

  17. lernest
    Member
    Posted 2 years ago #

    Same issue here, no response when it is in the child theme. Any suggestions?

  18. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    @thiefhunter:
    apology for the late reply:

    you have an error in the child styles that stops the responsive part to be applied:

    this section:

    a img {
        border: 0 none;
    #site-generator {
    display: none;
    }

    can you see the missing } after the border: 0 none; ?

    this section should look like:

    a img {
        border: 0 none;
    }
    #site-generator {
    display: none;
    }

    @lernest
    please post a link to your site, so someone can have a look and check your problem.

  19. lernest
    Member
    Posted 2 years ago #

    Apologies,

    site:www.fantasyofanovelidea.com

  20. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    weirdly enough, the same issue as @thiefhunter - a unclosed } in style.css of your child theme;

    this section:

    #post-103 h1 {display: none;}
    #post-73 h1 {display: none;
    .parent-pageid-103 #content .entry-title {
    display: none;
    }

    should read:

    #post-103 h1 {display: none;}
    #post-73 h1 {display: none;}
    .parent-pageid-103 #content .entry-title {
    display: none;
    }

    ---------
    some extended css styles for keeping the sidebar in smaller hand-held devices, which should work with all of the theme layout options.

  21. thiefhunter
    Member
    Posted 2 years ago #

    Oh, thank you dear alchymyth.
    I will look more carefullly!

  22. thiefhunter
    Member
    Posted 2 years ago #

    Well, it WAS fixed. What have I done? Now the sidebar on single posts has slipped to the bottom of the page, with a blank column where the sidebar should be. Oh, what a slippery business this is! Any ideas? http://bobarno.com/thiefhunters

  23. russgrimes
    Member
    Posted 2 years ago #

    I personally don't mind the sidebar going to the bottom but I have issues when adding a table or iframe with everything getting smaller except for those things in the table or iframe. Any ideas on how to keep pages looking like this page: http://ipbass.com/test/?page_id=6 instead of like this one on the iPhone?: http://ipbass.com/test/?page_id=136

    Formatting....a bit CSS to add to the Child Theme? Hopeless?
    Thanks for the help!

  24. BJBusch84
    Member
    Posted 2 years ago #

    Insert this at the end of your CSS. I jut found it on another website and it works great, I just cant find the link again to give the guy credit:

    /* =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%;
        }
    }
  25. BJBusch84
    Member
    Posted 2 years ago #

    This code also makes the menubar look great on a mobile device. It no longer adds a separate line for every choice.

  26. dwntn_rob
    Member
    Posted 2 years ago #

    I'm having a similar issue when using mobile. My nivo slider to pushing to the right. Can anyone help me with this?

    Here's a link to my site.

    Also, I'd like for the entire page to be viewable in mobile without scrolling. Anyone know how to do this?

  27. debbuxton
    Member
    Posted 2 years ago #

    This code help greatly. However, I am having problem with header as I have an image in the header but wanted the site-title & description to appear next to it.

    I used this code to do that which I think is causing the problem on the mobile screens. Any way to tell the mobile screens to just show the site tile?

    #site-title {
    margin-right: 270px;
    padding-left: 6em;
    padding-top: 10em;
    }

    #site-description {
    margin-right: 450px;
    padding-left: 6em;
    text-align: center;
    font-weight: bold;
    }

    Thanks for any guidance.

    deb

  28. The_liz
    Member
    Posted 2 years ago #

    For completeness, for other people reading this post: If you have 3 active footer widgets they will also stack by default. For getting them to line up in a row, see here: htp://http://wordpress.org/support/topic/twenty-eleven-footer-widgets-stack-on-iphone

  29. Lazarith
    Member
    Posted 2 years ago #

    Thank you The_liz for placing a link here, it helped me out with my triple footer stack.

  30. cruthas
    Member
    Posted 2 years ago #

    Hmmm, for some reason my width still isn't corrected on the iPhone and my nav bar is shifted way right... Anyone have any thoughts?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic