Images stretched on mobile

Hi mowerb,

Normally the javascript you are using fixes issues with the image sizes in certain situations.

For some reason the javascript inside the $(window).resize() wrapper isn’t firing when the page loads in mobile initially. I think if you simply add the code outside of that wrapper again it should work.

So in the “Custom Javascript” section try this:

$(window).resize(function(){
  setTimeout(function(){
    $('#sb_instagram .sbi_photo').each(function(){
      $(this).css('height', $(this).innerWidth() );
    });
  }, 501);
});

setTimeout(function(){
  $('#sb_instagram .sbi_photo').each(function(){
    $(this).css('height', $(this).innerWidth() );
  });
}, 501);

Let me know if you still need help with this!

– Craig

Thanks. I added that and it didn’t fix the sizing. In fact, when I added it, the sizing issue appeared both when I viewed the site on mobile and through a link on mobile (rather than just through a link on mobile.)

Hmm, any other options I can try?

Thanks,

Hi again,

I talked to John (the plugin author) about this to see if we could come up with any other solutions.

He is wondering if a longer delay is necessary for the specific issue with linking from twitter to your website.

Try replacing everything in the “Custom Javascript” with the following:

function setInstagramPhotoHeight(){
  var windowSize = $(window).width();
  $('#sb_instagram .sbi_photo').each(function(){
    $(this).css('height', $(this).innerWidth() );
    if( windowSize < 667 ) $(this).css('height', windowSize/3 );
  });
}
$(window).resize(function(){
  setTimeout(function(){ setInstagramPhotoHeight(); }, 501);
});
setTimeout(function(){ setInstagramPhotoHeight() }, 1500);

This also sets the width of each post to exactly 1/3 of the screen size so it will work as long as you keep your column settings as they are now.

Let me know if you need any more help with this!

Thanks,

Craig