css for full width instagram footer

  • Unknown's avatar
    mapinmypocket · Member ·

    Hi could you please help me with the css for a full width Instagram footer? My current theme has three footer widgets so even if I install a widget it is limited to 1/3rd of the screen. Would it be possible to make it just one ?

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, we can do this. Can you go ahead and add the instagram widget to the footer widget area? There are a number of different ways that themes do the footer area, so I’ll need to be able to work on your theme with your widget in place.

  • Unknown's avatar
    mapinmypocket · Member ·

    Thank you so much. I have published the widget now in the footer. Hope this works.

  • dcoleonline · Staff ·

    Hi there,

    This is a bit complex due to the HTML structure the shortcode outputs, but I’ve put something together that you can use:

    .site-footer .widget-area:first-of-type {
    width: 100%;
}
#sb_instagram {
    max-width: 100% !important;
}
#sb_instagram.sbi_col_1 #sbi_images .sbi_item {
    width: 333px;
}
#sb_instagram .sbi_photo {
    height: 333px !important;
}
#sbi_images {
    text-align: center;
}
.site-footer .container {
    max-width: 100%;
}

    Typically, we try to avoid using !important, but it was required a few times in this case. You can adjust the 333px numbers to any other numbers to change the size of the squares.

  • Unknown's avatar
    mapinmypocket · Member ·

    Hi, thank you so much!! It worked.

    But there is a lot of white space around the feed and the image sizes don’t really increase. Would you recommend I use the regular instagram widget instead of this plugin?

  • dcoleonline · Staff ·

    I’d say it is definitely worth trying. Once you have it active, let me know, and I’ll see what can be done.

  • The topic ‘css for full width instagram footer’ is closed to new replies.