WordPress › Support » [Theme:Twenty Eleven]Sidebar gone on frontpage when using mobile

atrais
Member
Posted 1 year 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?
garnikma
Member
Posted 1 year ago #

+1
desean
Member
Posted 1 year 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.
hidden driveways
Member
Posted 1 year 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
vickie
Member
Posted 1 year ago #

Not looking good on an iPad either - the menu wraps around onto 2 lines
rewozz
Member
Posted 1 year ago #

Well the searchbox doesn't look at all like it does in the video. It's huge on the iPhone.
MrSatro
Member
Posted 1 year 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
Samuel Coskey
Member
Posted 1 year 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

alchymyth
The Sweeper & Moderator
Posted 1 year 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)

Samuel Coskey
Member
Posted 1 year 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.
eXisTa
Member
Posted 1 year ago #

@alchymyth
Your peace of CSS is awesome I'm so glad it works for the iPad.
Thanks a million!
annaselway
Member
Posted 1 year 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
alchymyth
The Sweeper & Moderator
Posted 1 year 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;
annaselway
Member
Posted 1 year 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
thiefhunter
Member
Posted 1 year ago #

Thanks for the sidebar/iPad fix, alchymyth. It's perfect.
http://thiefhunters.com
thiefhunter
Member
Posted 1 year 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.
lernest
Member
Posted 1 year ago #

Same issue here, no response when it is in the child theme. Any suggestions?
alchymyth
The Sweeper & Moderator
Posted 1 year 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.
lernest
Member
Posted 1 year ago #

Apologies,

site:www.fantasyofanovelidea.com
alchymyth
The Sweeper & Moderator
Posted 1 year 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.
thiefhunter
Member
Posted 1 year ago #

Oh, thank you dear alchymyth.
I will look more carefullly!
thiefhunter
Member
Posted 1 year 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
russgrimes
Member
Posted 1 year 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!

BJBusch84
Member
Posted 1 year 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%;
    }
}

BJBusch84
Member
Posted 1 year ago #

This code also makes the menubar look great on a mobile device. It no longer adds a separate line for every choice.
dwntn_rob
Member
Posted 1 year 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?
debbuxton
Member
Posted 1 year 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
The_liz
Member
Posted 1 year 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
Lazarith
Member
Posted 1 year ago #

Thank you The_liz for placing a link here, it helped me out with my triple footer stack.
cruthas
Member
Posted 1 year 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?