instagram feed broken

  • Unknown's avatar
    lucassmarker · Member ·

    It works only when the web browser window is small, but when you maximize the web browser window, the instagram feed gets broken and the images are way out of alignment.

    link to webpage

    Best,

    Lucas

    The blog I need help with is: (visible only to logged in users)

  • csabarakasz · Staff ·

    Hi there,

    I tried to replicate what you mentioned, but for me it worked well.

    Is it possible that your site’s maximum width was changed? I noticed that some content on your website has a pretty wide size. I wonder if the maximum width was changed, it might have an impact on the block.

    I also found a recommendation on the Instagram support page:

    You could try to specify the width of the instagram shortcode block:

    Shortcode
    You can also wrap an Instagram URL inside a shortcode block, replacing LINK with the URL:

    [instagram url=LINK]

    This shortcode achieves the same result as simply posting the URL (i.e. the Instagram block), but does not require the URL to be on its own line.

    The shortcode can also be used to modify the size of the embedded post. By default, it will take up the full width of the content area, but by adding a width specifier to the shortcode, you can make it as small as 320 pixels (the minimum for the embed to work).

    For example:

    [instagram url=LINK width=320]

  • Unknown's avatar
    lucassmarker · Member ·

    Hey,

    So i tried the shortcode that you posted and that’s cool but it only works for one post at a time. I want to fix it in the context of the instagram feed. i think the feature is called “latest instagram posts” in the wordpress editing page.

    Regarding your first solution, how do i change my sites maximum width? i can’t find an answer without having to get premium to change the css.

    Best,

    Lucas

  • csabarakasz · Staff ·

    Hi there,

    Indeed, if you don’t have the premium plan, you won’t be able to change the css, so I don’t think that is an issue.

    Let’s go back to basics:

    • Have you tried deleting the “Latest instagram posts”
    • Disconnect your Instagram account
    • Reconnect Instagram account
    • Add the Latest instagram posts block

    This might help.

    (Please remember that when you disconnect your instagram account, that also removes every other Instagram content you might have in your site. Those won’t be restored automatically after reconnecting your account.)

  • csabarakasz · Staff ·

    One more thing you might try.

    I noticed on my own testing, that the different sizes of my original Instagram post had an effect on how the “Latest instagram posts” looked like. Mine didn’t fall apart as much as yours, but it wan’t a perfect square either.

    I noticed all your latest posts were squares, except the 9th latest, which is a video. You could see if it changes anything, if you post another square instagram post (so your video won’t be in the last 9 posts), and see if it still falls apart.

    Just a thought!

  • kokkieh · Staff ·

    Hi there,

    Looking at that page in the editor, you appear to have nested a bunch of blocks inside one another. Specifically, your Instagram block is inside a columns block, which is inside a Group block, which is inside another columns block, inside another columns block, inside another group block, inside another columns block. Here’s how it looks in the code editor view of the editor:

    <div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:jetpack/instagram-gallery

    That is most likely the cause of the layout issue here.

    Edit the page, and click on the text “Check out the Instagram below”. The sidebar on the right should indicate you’re now looking at a paragraph block.

    Press the down-arrow on your keyboard once. The sidebar should change to show you’re now looking at a columns block. Press Delete on your keyboard. Then add a new Instagram posts block, configure its settings like you want, and update the page.

    Let us know if you still see this layout issue after doing this.

  • Unknown's avatar
    lucassmarker · Member ·

    Thanks for the detailed information guys! i’ve tried all of ur suggestions, and deleted the extra columns block, but the layout is still broken.

    I maybe thought that i needed to connect to the instagram widget in the customizer, but it wasn’t connecting for some reason so stopped trying that.

    I also maybe think it could be because i’m on a retired theme?

    Thanks for the help so far!

  • staff-blorbo · Staff ·

    Hm, it could be the theme.

    Do you see the same problem when you live preview a different theme on on that page? https://wordpress.com/support/themes/#preview-themes

  • Unknown's avatar
    lucassmarker · Member ·

    Yeah i’ve tried a few themes and they seem to fix the problem. I think on sunday i’ll change my theme to a new one. If the problem persists after I activate, i’ll let you guys know.

    Thanks again.

  • The topic ‘instagram feed broken’ is closed to new replies.