Docs    Instagram    Customizations

Legacy: 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.

Note: This document was created for an older version of the plugin and may not work as expected in version 6.0 and above. In version 6.0 we introduced more granular control over the number of columns for different devices.

Below version 6.0

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();
});

support

Couldn’t find your answer in the docs?

Contact Support

Was this article helpful?