Docs    Instagram    Customizations

Change the number of columns for small screens

There is a setting available for this in the “Pro” version as of version 2.8. For the free version, you can change the number of columns at different widths using media queries. Use the appropriate areas on the “Customize” tab for best results.

Add the following to your preferred custom CSS location or stylesheet. One option is the default additional CSS location found at WordPress Dashboard > Appearance > Customize > Additional 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% !important;
  }
  #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% !important;
  }
}

@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% !important;
  }
}

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:

Add the following JavaScript to your site. This can be done manually using a custom JavaScript plugin. For further information see our documentation here.

function sbiResize() {
  setTimeout(function(){
    jQuery('.sbi').each(function() {
      jQuery(this).find('.sbi_photo').css('height', jQuery(this).find('.sbi_photo').eq(0).innerWidth() );
    });
  }, 501);
}sbiResize();

jQuery(window).resize(function(){
  sbiResize();
});

Carousel Feeds

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

Technical Support

Still have questions? We are here to help you succeed.

Open a support ticket