BugWP logo BugWP
Back to Community
Home / Community / Plugin → Smash balloon social photo feed – easy social feeds plugin

How to Customize Your Instagram Feed's Mobile Layout with CSS and JavaScript

32 threads Sep 7, 2025 Plugin → Smash balloon social photo feed – easy social feeds plugin

Content

One of the most common questions about the Smash Balloon Social Photo Feed plugin is how to control the number of columns on mobile devices. By default, the free version of the plugin displays a single column on mobile. Many users want a more integrated look, such as two or three columns, to better match their site's design on smaller screens.

Why This Happens

The plugin's default responsive behavior is designed to ensure images remain clear and legible on all devices. On mobile, it automatically switches to a single-column layout. This is a core feature of the free version. Customizing the number of columns for different screen sizes requires additional code to override the default styles and recalculate image heights.

Common Solutions

1. Using Custom CSS for Column Width

The first step is to use CSS media queries to change the width of the feed items on mobile. The following CSS code will force a two-column layout on screens smaller than 480px.

@media all and (max-width:480px) {
    #sb_instagram.sbi_col_10 #sbi_images .sbi_item,
    #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 {
        width:50% !important;
    }
}

2. Adding JavaScript for Image Height

A frequent issue after applying the CSS is that the image height does not adjust proportionally, leaving large gaps. This happens because the plugin's JavaScript needs to recalculate the layout. Add the following code to the Custom JavaScript area in the plugin's settings (WordPress Dashboard > Instagram Feed > Customize > Custom JavaScript).

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

3. Combining CSS and JavaScript for a Complete Solution

For best results, use both the CSS and JavaScript snippets together. The CSS changes the layout, and the JavaScript ensures the images resize correctly. If the feed loads slowly, you can try adding a delay to the JavaScript, as shown in the code above.

Troubleshooting Tips

  • Clear Caches: After adding new code, always clear any caching plugins or server-side caches to see the changes.
  • Check for Conflicts: Your theme or other plugins might have CSS that conflicts with these changes. Use your browser's inspector tool to identify and override conflicting styles. In one case, a theme was forcing a 3-column layout with width: 33.3% !important; which had to be overridden.
  • Ensure JavaScript is Loading: If the layout is still not adjusting, check that the plugin's JavaScript is loading correctly. You can try enabling the 'Enqueue JS in head' or 'Are you using an Ajax powered theme?' options under the Customize tab.

This community-driven approach has helped many users achieve their desired mobile layout. For more complex layout control, such as setting different column counts for tablet and mobile directly from the settings, the Smash Balloon team has developed that functionality for their Pro version.

Related Support Threads Support