Back to Community

Fixing Image Padding Issues in Your Smash Balloon Instagram Feed

Content

Many users of the 'Smash Balloon Social Photo Feed – Easy Social Feeds Plugin' encounter issues with the 'Padding around Images' setting. A common problem is that a custom padding value (e.g., 15px) appears to save correctly but then resets to the default 10px upon reloading the page. This can be frustrating when trying to achieve a specific layout for your Instagram feed.

Why Does This Happen?

Based on community reports, this behavior is not consistently reproducible and may be caused by a conflict. Potential sources of the issue include caching mechanisms (either within the plugin, another plugin, or your hosting server) or a rare bug that affects specific website configurations.

How to Resolve Padding Issues

If you find the padding value resetting, try these troubleshooting steps:

  1. Clear All Caches: After changing the padding setting, clear the Instagram Feed's cache by navigating to Instagram Feed > Settings > Advanced > Clear All Cache. Also, clear any additional caching from other plugins or your server.
  2. Use the Shortcode Directly: The most reliable method to apply custom padding is to bypass the visual settings and use the shortcode parameters directly in your page or post. The shortcode syntax for padding is:
    [instagram-feed imagepadding=15 imagepaddingunit=px]
    Replace '15' with your desired value and 'px' with your preferred unit (e.g., '%').
  3. Check for Plugin Conflicts: Temporarily deactivate other plugins one by one to see if the padding setting holds after a reload. If it does, you've identified a conflict with the recently deactivated plugin.

Advanced Padding Control

The standard 'Padding around Images' setting applies padding uniformly to all four sides of each image. If you need more granular control, such as applying padding to only one side (e.g., just the bottom), you will need to use custom CSS.

For example, to remove all padding from around the entire grid but keep padding between the images, you could add CSS like this in the Instagram Feed > Customize > Custom CSS box:

#sbi_images {
    padding: 0 !important;
}
#sb_instagram #sbi_images .sbi_item {
    padding: 5px !important;
}

Adjust the '5px' value to control the spacing between your images. This CSS targets the main container to remove its padding and then reapplies padding to each individual item inside it.

By following these steps, you should be able to effectively manage the padding around the images in your feed and achieve your desired layout.