Archived topic
Responsiveness around photo in Twitter object
5 replies · Started by David R on August 28, 2017
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>.
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>That fixed it. JNA (Javascript Nucleic Acid) Sequencing.
Awesome :)
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?
Could be.. Possibly a bug in jQuery Masonry? Curious to see if it's still an issue in GPP 1.5.
