Instagram Block not displaying properly

[stacyd]

I inserted an Instagram block and put in the URL. While I’m editing the post, it shows correctly. When I view it on the website, it’s cutting off the bottom of the Instagram post. Help, please! What am I doing wrong?

Robert Wickens returns to the track in Toronto | 33 Dreams of Indy - Focused...

[nabeel]

Hi @stacyd,

Thank you for reaching out to us. To fix the issue, first add the following code in the Theme Options > CSS:

.x-resp-embed iframe.instagram-media {
    position: relative !important;
}
.wp-block-embed-instagram .x-resp-embed {
    position: relative;
    padding-bottom: 0;
    overflow: visible;
    height: auto;
}

Then add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.instagram-media').each(function(index, el) {
		$(this).height($(this).attr('height'))
	});
});

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[stacyd]

Hi Nabeel,

Gave it a try, but it cuts off even shorter this go-around. Here’s a photo:
We’ve testing our plug-ins to make sure they aren’t interfering. As it loads, I see it start to load the entire feed, but then it’s covered. Same problem on this post: http://www.theearlofindy.com/sage-karam-in-toronto-last-chance-or-ticket-to-ride/

Thank you!

[stacyd]

Similar problem with Twitter as well. Thanks!

[ruenel]

Hello @stacyd,

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

body .x-resp-embed iframe {
    height: -webkit-fill-available;
}

We would love to know if this has worked for you. Thank you.

[stacyd]

We’re getting closer. Here are three screenshots:

at 100% fullscreen on Chrome:

at 75% zoom on Chrome

I really really appreciate your help on this. This is a rabbit-hole that would have taken me days and days to figure out.

[ruenel]

Hello @stacyd,

Sorry if it did not worked for you. Please remove the custom css given in the previous responses. Since your child theme is already installed and active, please add the following code in your child theme’s functions.php file

// Responsive Embeds
// =============================================================================

add_filter('embed_oembed_html', 'x_responsive_embed_class', 10, 3);

if ( ! function_exists( 'x_responsive_embed_class' ) ) :
  function x_responsive_embed_class($html, $url, $attr) {
      return $html!=='' ? '<div class="no-x-resp-embed">'.$html.'</div>' : '';
  }
endif;

Hope this helps. Please let us know how it goes.

[stacyd]

Woo hoo! Success!!! Thank you so much for sticking with me to find an answer. /Stacy

[rad]

You’re most welcome Stacy!