Change the number of columns for small screens

You can change the number of columns at different widths using media queries. Use the appropriate areas on the “Customize” tab for best results.

CSS

/* Media queries */
@media all and (max-width: 640px){
  #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_6 #sbi_images .sbi_item{
    width: 50%;
  }
  #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
    width: 25%;
  }
}

@media all and (max-width: 480px){
  #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_6 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
    width: 50%;
  }
}

The red number represents the width of the screen you are changing in pixels

The yellow numbers represent the width of each post for that screen width. Use 50% for 2 columns, 33% for 3 columns, 25% for 4, etc.

You might also need this “Custom Javascript” to set the correct height:

Javascript

jQuery(window).resize(function(){
  setTimeout(function(){
    jQuery('#sb_instagram .sbi_photo').css('height', jQuery('#sb_instagram .sbi_photo').eq(0).innerWidth() );
  }, 501);
});
setTimeout(function(){
  jQuery('#sb_instagram .sbi_photo').css('height', jQuery('#sb_instagram .sbi_photo').eq(0).innerWidth() );
}, 501);

Carousel Feeds

For carousel feeds, you need to edit the source code of the plugin. Contact support if you have questions.