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!

No, sorry, I like the current display in the sense that it shows one image that scrolls through the feed. My issue is that instead of displaying the image as a square, it shows it stretched into a rectangle. I’ll attach a screenshot to explain.

I’ve tried some CSS to change the width, which does correct the distortion, but leaves the feed aligned to the left side of the page – looking just as awkward.

Please help, it’s quite frustrating.

https://theseforeignroads.com/wp-content/uploads/2018/03/IMG_1468.png

Above is a link to the screenshot showing the stretched image.

Thanks again,

Mark

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

Hmm, the javascript didn’t change anything, but I was able to correct some of the problem by simply changing the hight from 200 to 300px.

My only issue now is how pixelated the images are on the mobile view. On desktop the images are crystal clear, on my mobile they are far from it.

Thanks again!

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

I don’t know if my problem is the same, but I have noticed that the images gets really tall on mobile devices, instead of the classic square look. How can I keep the square images on mobile?

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.

Sure, check out eviila.dk – it is placed in the bottom.

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!

Yeah, the feed would take up too much space on mobile, if it was single column.

There seems to be an issue with the code, like it doesn’t overwrite the default code. When resizing the windows, the images pops into a square and the back to the rectangular format real quick.

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

It worked!
Thank you for great support ??