Bug: Facebook plugin disables mobile view of (2011 default) theme TwentyEleven

Umm.. The Facebook plugin does not do that, because it doesn’t affect the display of the theme. It doesn’t know “mobile” or not, because it doesn’t do anything even remotely related to that.

When I activate the plugin, the mobile view doesn’t display correctly.

When I deactivate it, it does display correctly.

To me, that’s a bug. If I’m mistaken or doing something incorrect, I’m willing to learn what.

Here are the header/footer view with the plugin disabled.
https://tinypic.com/r/2ufcd8g/6
https://tinypic.com/r/30u6cue/6

And with the header/footer view with the plugin enabled.
https://tinypic.com/r/cn43d/6
https://tinypic.com/r/2ch0qpj/6

And it’s most definitely affecting the visual appearance of the existing theme.

Hi,

It could be due to:

@media only screen and (max-device-width: 480px) {
	.fb-like {
		float: left;
		width: 100%;
	}

	div#page {
		width: 480px;
	}

	div.fb-comments span{
		float:left;
 		width:100%;
	}
}

But that doesn’t really break anything. Twenty Eleven is “fluid” but not “responsive” all the way, therefore there will be slight differences with and without the FB plugin. Twenty Eleven will not “stack” the main menu, while when you activate the plugin this becomes “stacked”. This is what you’re referring to correct?

“issue” with this is actually based on:

div#page {
    width: 480px;
}

It needs to be:

div#page {
    max-width: 480px;
}

I haven’t looked all the way, but this is a good start.
Emil

Twenty Eleven is “fluid” but not “responsive” all the way

ummm, Emil, TwentyEleven uses media queries. If it were fluid it would show as 1440px wide on my monitor. If anything I would say partially fluid as it graduates down as you resize, but by using media queries, that’s the only real requirement to being responsive.

Fluid layouts are always based off of a percentages. like 25% / 75% width cols. It’s fixed width, until the screen size is too low, and then it changes (via media query) to a fluid layout.

Just making sure you don’t confuse anyone.

@jason hehe, thanks for the lesson bud ?? I must update my Responsive Theme according to this ??

My mistake was the word “fluid” it should be more like “adaptive” in either case “” (quotes) did not mean what you think it did, that’s why people use them.

Thanks,
Emil

P.S. My Theme is using % but it’s not stretching all the way across the screen, same thing goes for https://cssgrid.net we both use the breakpoint and media queries ??

@emil – that’s part of it (the navigation stacking). The other part was the typeface size of the post headline. It’s quite larger, taking up valuable smartphone real estate. But, looking now that doesn’t seem to be the case.

And, yes, I was too quick to apply “responsive” to this. My mistake. Point being, the plugin does seem to do a bit of undoing of what the theme does for smartphone layout… that’s all I was really trying to point out.

Here is how the page loads with the recommendation you supplied:
https://tinypic.com/r/dr9g5t/6

Thanks for helping out. I appreciate it.

Can you please post the actual URL for me?

Emil

@emil – I used the contact form on your site to send you the URL.

No problem ??

Emil