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

@lazarith

Yeah I did see and implemented the css. I believe I may have figured out my issue. Looks like my nav bar is causing the issue. It is too wide and adjusting the width only breaks it. I will bring the issue up in another forum post.

I just found out today too that the right side bar is on the bottom of the iPad. Bummer. I would do something with CSS but I am not sure I can. I got my WP account via GoDaddy when I got my domain and web hosting. Can I affect the CSS if it goes through them?

Dont know if this will help but we found that by commenting out

<meta name=”viewport” content=”width=device-width” />

On line 26 in header.php in the theme folder fixed all the iphone/ipad problems and just renders the site out as a normal web page.

To remedy this problem of the breaking navigation bar and relocated sidebar, I simply followed the advice of the previous commenter and commented out that line of code. And it works. After months of wondering how to address this problem, it was fixed just like that.

But I’m wondering if there’s something more to this. I’m not able to view my website in multiple mobile devices, so I don’t know if the fix is working on something other than an iPad or iPhone. Also, could other problems be created by commenting out that line of code?

Early on in this thread someone suggested that we add several lines of code at the bottom of our CSS. But commenting out that line means there isn’t any CSS to adjust, correct? I’ve essentially removed the code that treats my website differently when rendered on a mobile device?

Thanks!!

SIDEBAR SHOWING WHEN RESIZING BROWSER BUT NOT WITH IPAD/IPHONE”

I got the slightly longer code provided by alchymyth
here:
https://www.transformationpowertools.com/wordpress/twenty-eleven-sidebar-adaptations-for-hand-held-devices

to work on all my browsers…so when resizing browser window(s) the sidebar stays in place and doesnt move below the content….

….however its not working (yet) on iphone or ipad which was my original goal??

anyone with the same problem…any solutions?

Jan

https://www.transformationpowertools.com/wordpress/twenty-eleven-sidebar-adaptations-for-hand-held-devices

Hi guys,

I also have probs with the theme and the ipad (sidebar especially). I tried all of the codes listet at the beginnig of this thread but nothing brings an affect?! Can anyone give me a hint? Here is the website I am talking about: https://www.artbreit.de . Not really responsible for mobile devices… You know.

Thx for your help!!

Hey ds2508,

for me it suddenly worked….as I said above it first worked already on all my browsers….and then after a few hours it did on iPhone and iPad too. I don’t really know why it works now and what I have done…but it works! ??

Do iphone and ipad have a cache?? Could that be a reason why it took a while for those devices to update?

No clue….

DS2508…is the code working for you in the browser (empty cache to check!)? Actually just checked myself…doesnt seem to be working ??

Which Theme are u using?

Have you created a child theme) (suggested to do all changes only in a child theme!)

That for me was the first step to getting it run on iPad/iphone.

Wir k?nnen auch auf deutsch kommunizieren übrigens! ??

Unfortunately I’m a newbie to wordpress and no good in coding…but luckily until now I could get everything I wanted my site to look like done….even if a small change sometimes takes me like a day!

As the German says: mühsam ern?hrt such das eichh?rnchen! ??

GOOD LUCK!

If the person resizes the width of the browser, the sidebar (on the right) drops below all the posts (as well as the comment bubbles). I’ve had this problem with the twentyten theme as well and fixed it on both.

In the standard style.css file, all you have to do is:

1. Copy/Paste the original code into a text editor
2. Find/Replace all the “max-width” (without quotes of course) with “width” (again, without quotes).
3. Copy/Paste the corrected code back into your WordPress style.css
4. Click Save.

I’ve tested it on long menus, and the sidebar and it works. I only have an iphone, so I can’t test with the other mobile devices.

To The Top,
Kevin Rape (I have an awesome last name ?? )

iprogress’s solution of commenting out a line in the php seems to have worked for me.

<meta name=”viewport” content=”width=device-width” />

Thank you billabong, for your comments. Now it’s working! Just some tags, which were incorrect. Yes! ??

Hi, I’m a relative newbie and am having some of the same problems as people in this thread.

My site looks fine on my laptop but on mobile devices, the navigation items stack up and the search box covers up the header photo.

I’m using a twenty eleven child theme.

I tried adding this

/* =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%;
	}
}

The sidebar is where it’s supposed to be, but I’d like it to be visible upon first visiting the site. (Currently I have to scroll right to see it.) Also, this didn’t fix the issue of the search box or the navigation menu.

I’d really appreciate any help.

https://www.troupband.com

hey cheeky nasty,

I added the following code into my style.css. That did the job!

[61 lines of CSS moderated as per the Forum Rules. Please just post a link to your site.]

I added the following code to help my website look better on mobile devices…

[Code moderated as per the Forum Rules. The maximum number of lines of code that you can post in these forums is ten lines. Please use the pastebin]

…and it helped a little but I still am unsure about how to get the header image to not shrink and get the menu items so show up next to each other versus a few per line. Any suggestions? The url is: landmarknurseries.net