WordPress.org

Forums

Twenty Fourteen
Twenty Fourteen on mobile problem (7 posts)

  1. TouchTheCow
    Member
    Posted 11 months ago #

    Hi there,

    Just building my personal site at teeschneider.com and having a little trouble. It looks like it will work on desktop the way I want but when viewing on iphone I have an empty right sidebar taking up space. I prefer how the theme looks without this sidebar and do don't want to put content in it. It only seems to show on mobile. I'm probably just missing something simple.

    Thanks.

    Tee

  2. CrouchingBruin
    Member
    Posted 11 months ago #

    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.

  3. TouchTheCow
    Member
    Posted 11 months ago #

    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!

  4. r3quiem
    Member
    Posted 9 months ago #

    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

  5. r3quiem
    Member
    Posted 9 months ago #

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

  6. CrouchingBruin
    Member
    Posted 9 months ago #

    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.

  7. r3quiem
    Member
    Posted 9 months ago #

    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!!

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.