[Resolved] Responsiveness around photo in Twitter object

[David R]

WordPress now natively embeds Tweets. However, if that Tweet includes a photo, the blog page (using Masonry) doesn’t respond to the Tweet when expanded; my post below the post with the Tweet overlaps the Tweet photo.

Site: https://edwa0089.us/

The title of the post that overlaps the Tweet photo is “This is SPAR”. If I zoom in or out on the page, it then moves and realigns to not overlap.

However, the appearance on load:

I show full posts in the blog list. Sometimes even just going F12 will re-align the <articles>.

[Tom]

Hmm, so masonry is initializing before the tweets.

Try this in your wp_footer hook:

<script>
jQuery( window ).load( function() {
    setTimeout( function() {
        jQuery( '.masonry-container' ).masonry();
    }, 250 );
} );
</script>

[David R]

That fixed it. JNA (Javascript Nucleic Acid) Sequencing.

[Tom]

Awesome 🙂

[David R]

Ok, same site, another masonry issue, but not the timing thing.

Masonry blog with large for both blog options is one column on all browsers on my Windows 10. Except…

I have a CentOS 7.4 with KDE desktop Hyper-V virtual machine using Chrome. The large blog masonry is two columns. Two columns in CentOS/Firefox, too. And Konqueror. Ok. So it’s CentOS, or Linux in general.

Layout container is 1100px
Viewport: 1024 x 655
Mozilla/5.0 (X11; Linux x86_64) AppleWebkit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36
jQuery 1.12.4

It’s just weird that masonry goes 2-column in CentOS/Chrome. Rendering quirk?

[Tom]

Could be.. Possibly a bug in jQuery Masonry? Curious to see if it’s still an issue in GPP 1.5.

[Author]

Posts