WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. nlavertue
    Member
    Posted 1 year ago #

    The TwentyEleven theme was designed with a responsive layout in mind.

    The HUGE benefit to it is that it works well on desktop, tablet and smartphone without any need to use extra plugins or themes. It simple works.

    However, the current version of the Facebook plugin, when activated, disables this function leaving tablet and smartphone users with a less than ideal experience.

    http://wordpress.org/extend/plugins/facebook/

  2. Samuel Wood (Otto)
    Tech Ninja
    Plugin Contributor

    Posted 1 year ago #

    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.

  3. nlavertue
    Member
    Posted 1 year ago #

    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.

  4. nlavertue
    Member
    Posted 1 year ago #

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

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

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

  5. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    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

  6. Jason
    Member
    Posted 1 year ago #

    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.

  7. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    @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 http://cssgrid.net we both use the breakpoint and media queries ;)

  8. nlavertue
    Member
    Posted 1 year ago #

    @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:
    http://tinypic.com/r/dr9g5t/6

    Thanks for helping out. I appreciate it.

  9. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    Can you please post the actual URL for me?

    Emil

  10. nlavertue
    Member
    Posted 1 year ago #

    @Emil - I used the contact form on your site to send you the URL.

  11. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    No problem :)

    Emil

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic