Spacing & display of Facebook & Twitter embed posts

[Cherylwoodman]

Hi Themeco,

Can you help? When I embed a post from Facebook and Twitter - they don’t view well on mobile. Here’s what happens;

1. For Facebook there’s always a huge space after > https://www.screencast.com/t/UZhoCCprBS
2. For Twitter, the embed post doesn’t shrink > https://www.screencast.com/t/fT1TSAM6An

…and 3 on a slightly different note - this return to the top button isn’t working on mobile > https://www.screencast.com/t/kmExw6oTSA

Thanks so much,

Cheryl

[paul.r]

Hi Cheryl,

1. I can see you added a height to your iframe, please remove it and add min-height instead.

eg.

<iframe style="width:100%;min-height:500px;border: none; overflow: hidden;" src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FHonestyForYourSkin%2Fposts%2F2680563858835910&amp;width=500"  frameborder="0" scrolling="no"></iframe>

2. I can see you added a min width to your twitter container which makes it non responsive.

Please remove it or try to set it to a lower number.

Hope that helps

[Cherylwoodman]

Hi Paul,

1. So i take this code directly from Facebook, which looks like;

iframe style=“border: none; overflow: hidden;” src=“https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FHonestyForYourSkin%2Fposts%2F2669773283248301&width=500” width=“500” height=“595” frameborder=“0” scrolling=“no”>Bottom line, <a href=“http://www.honestyforyourskin.co.uk/0srs” target="_blank" rel=“nofollow noopener”

I tried your suggestion a couple of ways and this is what i get > https://www.screencast.com/t/u5M3CFPZe

What would you suggest?

2. Way back, one of your colleagues gave me a code to make all twitter embeds centre automatically - I’m thinking this code must be from here. I added this to the custom css for my site, however after all the updates, the css is no longer in my cornerstone homepage. Where would i find this to alter it? How would i alter it?

[rad]

Hi @Cherylwoodman,

The min-width isn’t responsive regardless of element. The max-width is the one responsible, it maintains the width but still scales down on a smaller device. The min-width is only applicable if an element has zero width or small width that needs to have a constant width. And that CSS is coming from the embed code itself (inline style).

And the code provided by Facebook isn’t responsive, it assumes you’re only using in a desktop similar how ads are embedded, they have fixed sizes. I checked it and you have this CSS,

@media (min-width: 979px)
...
..
.
.entry-content embed, .entry-content iframe, .entry-content object {
    width: 61%;
    max-width: 100%;
}
...
..
.

Which is working okay, perhaps you already fixed it?

As for the twitter, you’ll have to set min-width to 0px to make it responsive. Example,

.entry-content .twitter-tweet {
    margin: 0 auto !important;
    width: 100% !important;
    min-width: 0px !important;
    max-width: 520px !important;
}

Thanks!

[Cherylwoodman]

Hi Rad,

I’m feeling a little confused here;

I added the twitter code you suggested to my custom css however it doesn’t work.

The Facebook posts still display with a large white space below the post.

What would you suggest?

Cheryl

[rad]

Hi Cheryl,

The Facebook box responds on my view regardless of device. Perhaps you can provide the exact URL where this happens? What I checked is the first post in your blog page.

As for twitter, you should set the min-width to zero as given in the CSS. You still changed it to 520px.

Thanks!

[Cherylwoodman]

Hi Rad - the code you can see for Twitter in the screenshot you have - I don’t know where this comes from. Can you help me to locate where it is?

[Prasant]

Hello Cheryl,

Thanks for updating the thread.

It seems that the code having class .entry-content .twitter-tweet is coming from the Theme Options panel. Please check under X > Theme Options > CSS.

Thanks.

[Cherylwoodman]

Ah perfect - life saver - it’s worked - thank you so much Prasant!

The other one which I haven’t been able to fix yet is the Facebook posts which leave a huge white space after the post in mobile viewing - see here > https://www.screencast.com/t/UZhoCCprBS

Can you suggest how to fix this?

Thankyou so much,

Cheryl

[Prasant]

Hello Cheryl,

Thanks for updating the thread.

You can add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .entry-content iframe {
    height: 430px;
}
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[Cherylwoodman]

Hi Prasant,

Thankyou - this works fabulously on mobile. When I play with the size on a computer I still get the gap at a certain size screen > https://www.screencast.com/t/PqGs0DKfTBQ you can see in real life here > http://www.honestyforyourskin.co.uk/why-are-the-pores-on-my-face-getting-bigger/

It also auto-sizes a bit small, is this something i can change by playing with the 430px specification?

Thanks so much,

Cheryl

[thai]

Hi There,

Please update the previous CSS to this:

@media only screen and (min-width: 1024px) {
    .entry-content iframe {
        height: 550px;
    }
}

@media only screen and (max-width: 980px) {
    .entry-content iframe {
        height: 470px;
    }
}

@media only screen and (max-width: 600px) {
    .entry-content iframe {
        height: 600px;
    }
}

@media only screen and (max-width: 500px) {
    .entry-content iframe {
        height: 450px;
    }
}

@media only screen and (max-width: 320px) {
    .entry-content iframe {
        height: 380px;
    }
}

Hope it helps

[Cherylwoodman]

Hi Thai - thank you for your suggestion, actually this had no effect, do you know why?

[rad]

Hi @Cherylwoodman,

May I know where did you add it? This is what I’m seeing from your site

@media only screen and (max-width:600px){
.entry-content iframe{
height:430px;
}
}

Other parts are missing.

Please add that CSS again.

Thanks!