Instagram Layout

  • Author
    Posts
  • #128328

    Hi Ricardo. Is there a way to add the instagram pictures horizontally along the bottom of the blog instead of vertically? Thank you. Jessica

    The blog I need help with is ladyandthelibrary.com.

    #128428

    ricardpriet
    Theme Author

    Hi there,
    yes it is possible with some CSS:

    1. Add the Instagram Widget to the Third Footer area and select 3 as number of columns.

    2. Add this CSS:

    #pre-footer > .container {
        width: 100%;
    }
    .pre-footer #footerthird {
        padding: 0;
        width: 100%;
        flex: 1 1 auto;
    }
    .pre-footer #footerthird .widget_wpcom_instagram_widget {
        margin: 0;
        padding: 0;
        border: 0;
    }
    .pre-footer #footerthird .wpcom-instagram-columns-3 {
        grid-gap: 0;
        grid-template-columns: repeat(auto-fit, minmax(5px, 1fr));
    }
    @media (min-width: 768px) {
    .pre-footer > .container > .row {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    }

    Please, let us know of it works :)
    Thank you!
    Ricardo P. from SiloCreativo

    #128429

    Thanks Ricardo. It did work, thank you very much.

    The only issue is that the photos are very small and have big gaps between them. Is there any way to make them bigger and join them together so they are like a banner that goes across the bottom of the page?

    #128432

    ricardpriet
    Theme Author

    Hi there!

    Yes, it should look like you said. Maybe there is a missing line or point. Could you please activate the Widget to take a look?

    In order to not activate it in the whole site, you can use the visibility widget to enable it only in a single post or page and send me as example:
    https://en.support.wordpress.com/widgets/#widget-visibility

    Thanks :)
    Ricardo

    #128433

    Thank you. I have activated the widget again so you can see. I copied and pasted the code, so not sure what I have done wrong.

    #128437

    ricardpriet
    Theme Author

    Hi there!

    Yes, this CSS is missing:

    #pre-footer > .container {
        width: 100%;
    }

    and a custom CSS added before need to be overwritten. Add this:

    .pre-footer .wpcom-instagram-columns-3 a {
        margin: 0;
        width: 100%;
    }

    Whit those rules added you will get this:
    http://imagizer.imageshack.com/img922/1928/fz6qFA.jpg

    Hope this was you are looking for :)
    Thanks again!
    Ricardo P.

    #128438

    Thank you so much Ricardo. You have been so helpful yet again. It looks great!

    #128439

    ricardpriet
    Theme Author

    Fantastic! Nice to hear it works :)

    Have a nice week,
    Ricardo P.

    #128441

    Sorry Ricardo, just one last question and I will leave you alone. Is there a way to reduced the gap between the instagram feed and the gallery above it?

    #128442

    ricardpriet
    Theme Author

    Yes it is,

    1. Remove the CSS code you have added before about this selector:
    .wpcom-instagram-columns-3 a:before

    or just add this CSS to overwrite:

    .wpcom-instagram-columns-3 a:before {
        content: none;
    }

    2. Then you can remove the gallery bottom paddings and margins with this one:

    .pre-footer .widget_media_gallery {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    Hope this helps :)
    Ricardo P.

    #128452

    Thanks Ricardo. That worked great.

    I get the lovely Instagram layout on my MacBook and my phone, but when I look at my site on a PC, the Instagram layout it huge and vertical.

    Is there a fix for this?

    #128468

    ricardpriet
    Theme Author

    Hi there,

    yes, the Instagram Widget uses a new CSS rules called “CSS Grid Layout”. This only works with newest versions of browsers:
    https://caniuse.com/#feat=css-grid

    However, try to force refresh as WordPress.com’s doc says:
    https://en.support.wordpress.com/browser-issues/#force-refresh

    If it doesn’t work, see the info about Supported Browsers and take a look to browse happy to check latest versions: http://browsehappy.com/

    Please, let us know if this solve the issue.
    Thanks!
    Ricardo P.

The topic ‘Instagram Layout’ is closed to new replies.