Instagram

  • Author
    Posts
  • #116847

    Hi Ricardo,

    My website (www.hersuitcase.com) has an Instagram grid, which used to show all images as squares. All of sudden the format is now showing the images in their actual shape, which ruins the look.

    Can you please help me to restore the Instagram grid to squares?

    Thank you kindly.

    Jessica

    The blog I need help with is hersuitcase.com.

    #117010

    ricardpriet
    Theme Author

    Hi Jessica,
    thanks for writing, hope your are well :)

    Yes, Instagram are sending the images as them were upload. So if you upload a vertical one, WordPress.com shows it vertical, the same for landscape images.

    However, you can add this CSS to set the Instagram images as squares:

    .wpcom-instagram-columns-3 a {
        margin: 0 1% 2%;
        width: 30%;
        display: block;
        float: left;
        position: relative;
    }
    .wpcom-instagram-columns-3 a:before {
        content: "";
        display: block;
        padding-top: 100%;
    }
    .wpcom-instagram-columns-3 img {
        margin: 0;
        max-width: 100%;
        float: none;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    Hope this helps and thanks again :)
    Ricardo P. from SiloCreativo

    #117011

    Thank you SO much Ricardo. All fixed. Appreciate your amazing service!

    #117013

    ricardpriet
    Theme Author

    Fantastic Jessica! thanks you for keeping us posted.

    Have a nice day :)
    Ricardo

The topic ‘Instagram’ is closed to new replies.