Images stretched on mobile

mowerb
(@mowerb)

10 years, 4 months ago

Site: irisofstyle.com

I have 6 Instagram images displayed at the bottom of the site. Normally, they look fine on mobile. But, If I visit the site through a link [For example: Twitter (https://twitter.com/irisofstyle) or Facebook (https://www.facebook.com/irisofstyle/)], the images are stretched.

Any ideas?

I’m using the following Custom CSS and Custom JS within the plugin:

@media(max-width: 667px){
#sb_instagram #sbi_images .sbi_item{ display: none; }
#sb_instagram #sbi_images .sbi_item:nth-child(-n+6){ display: inline-block; }
#sb_instagram #sbi_images .sbi_item { width: 33% !important; }
}

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

Thank you

https://wordpress.org/plugins/instagram-feed/

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Contributor Craig at Smash Balloon
(@craig-at-smash-balloon)

10 years, 4 months ago
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
Thread Starter mowerb
(@mowerb)

10 years, 4 months ago

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,
Plugin Contributor Craig at Smash Balloon
(@craig-at-smash-balloon)

10 years, 4 months ago
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

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Images stretched on mobile’ is closed to new replies.

Tags