[Theme:Twenty Eleven]Sidebar gone on frontpage when using mobile

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

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

Apologies,

site:www.fantasyofanovelidea.com

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.

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

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? https://bobarno.com/thiefhunters

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: https://ipbass.com/test/?page_id=6 instead of like this one on the iPhone?: https://ipbass.com/test/?page_id=136

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

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%;
    }
}

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

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?

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

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://https://www.ads-software.com/support/topic/twenty-eleven-footer-widgets-stack-on-iphone

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

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?

@ cruthas,

Did you see the above post by Alchymyth? It might help, here it is:

@sgcoskey

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

[code moderated per forum rules - please use the pastebin]

I used this code and it got rid of the stack that I was having on Android mobiles and iPhone mobiles.