Feed Distorting Images on Mobile

Hey tfrmark,

Are you trying to have the feed show all of the posts in a single column for mobile? If so, you could reset the “height” of the feed to “auto” for small screens with this CSS:

@media all and (max-width: 640px){

#sb_instagram.sbi_fixed_height {
    height: auto !important;
}

}

Let me know if this isn’t what you were hoping for!

Hey again,

Ahh I think I understand now.

The image isn’t actually stretched, the bottom part of the image is hidden because the height of the wrapping element is set to “200px” in your settings for the feed. You can set the height of the wrapping element dynamically with some JavaScript.

Try adding the following to the “Custom JavaScript” area on the “Customize” tab:

function setFeedHeight() {
  if (window.innerWidth < 640) {
    setTimeout(function(){
    jQuery('#sb_instagram').css('height',jQuery('#sb_instagram .sbi_item').first().innerWidth()+'px');
  }, 100);
  }

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

This will resize the wrapping element to be the same as the width of one of the posts so it will be the correct height for the width of the posts.

Let me know if this still isn’t what you meant!

– Craig

Hey again Mark,

Sorry the code didn’t seem to work! I’m wondering if it was due to the page being cached. Does that sound possible? You could try adding the code back and then clearing your page cache.

To fix the issue with the image resolution, you could try changing the image resolution setting from “auto” to “full” and see if it helps.

Thanks,

Craig

Hey zzbeck,

It sounds different than this issue actually. Can you provide a link? I should be able to help you with a fix then.

Hey again,

It looks like there was a bit of custom CSS added to your theme that is changing the mobile layout from a single column to 2 columns. In order to correct the height for the images in this case, you would want to add the following to the “Custom JavaScript” area:

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

Let me know if you have any more questions!

Hello again,

Actually, thinking about this a bit more, there is code in the plugin to accommodate different settings for mobile columns. Try removing all of your custom code and add this instead:

jQuery('.sbi_mob_col_auto').removeClass('sbi_mob_col_auto').addClass('sbi_mob_col_2');

We’ll have to update our FAQ as this will be more reliable.

– Craig