Twenty Fourteen on mobile problem

That space over to the right isn’t caused by a sidebar. It’s caused by the Flare social media plugin. To see this, shrink the width of your desktop browser as narrow as it will go. Then hover your mouse over the Twitter, Facebook, and Flare buttons. You’ll see a little pop-up balloon appear that shows how many tweets, FB likes, and a “Made with Flare” ad. The space that the plugin reserves for those balloons extends out beyond the right border of the page content, and creates that empty space to the right. If you hover over the Flare button, you’ll see the pop-up extends out to the right. If you disable the Flare plugin, that empty space should go away on your mobile device.

Not sure how you would fix this. You can see if Flare allows the social buttons to display to the left of the page so there’s room for the pop-ups. You can try posting a question on the Flare support page. Of if you’re not locked into using Flare, there are other social media plugins you can try.

Thank-you CrouchingBruin. I replaced Flare with the Filament version which fixed the sidebar issue but it doesn’t seem to actually share anything on Facebook so looks like I’m on the hunt for a new social share again…too bad though cause I loved the way it looked!

I think I have this same problem.

Could you please check Here.

Did you find a solution to the problem?

Its really annoying not being able to get my icon flush to the right. As you resize the videos page down, and then scroll right you can see the gap.

It seems to elude Firebug also… unless its showing somewhere I dont quite know of yet

I am using the AddThis social media smart layer, however the mysterious right sidebar (non sidebar) appears when the bottom “Follow” bar is activated.

The problem is with this rule in your child theme’s style sheet:

.site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
    max-width: 630px!important;
    width: 200%;
    overflow: inherit;
}

Not sure why the width is set to 200%, but the main content is stuck at 656px even at narrow screen widths (630px + 13px of padding & border on both the left & right sides). I would probably add a media query to reset the width to 100% on a mobile screen size.

Thank you so much for this!!
This has been winding me up for a few weeks now.

I managed to solve it in the end, you put me on the right course! I added the media query for 100%, had to increase the z-index on the icon as that was rendered unclickable, then noticed a 30% margin-right, which i decreased to 0 and its done!

@media only screen and (max-width: 630px) {
.site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
    max-width: 630px!important;
    width: 100%;
    overflow: inherit;
}
.site-content {margin-right:0!important;
}
}

Thank you!!