Support » Plugin: Smash Balloon Social Photo Feed » Feed Distorting Images on Mobile

  • Resolved tfrmark

    (@tfrmark)


    Hey, I love the plugin so far, it works beautifully on desktop view. Unfortunately though, on mobile view it distorts the image. This only happened when I changed the width to 100% to span the full page on desktop view. Now on a mobile screen, the width is full, but the height doesn’t change to reflect this.

    I’ve tried several different methods without success. The closest I’ve come to correcting the issue is using css to change the height and width with a media query, and while this DOES change the size to what I’d like, the feed is now aligned to the left. I’ve tried everything I can think of to correct this issue, without luck.

    Please help!

    – Mark

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Contributor Craig at Smash Balloon

    (@craig-at-smash-balloon)

    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.

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

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

    Thanks again,

    Mark

    Plugin Contributor Craig at Smash Balloon

    (@craig-at-smash-balloon)

    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!

    Plugin Contributor Craig at Smash Balloon

    (@craig-at-smash-balloon)

    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?

    Plugin Contributor Craig at Smash Balloon

    (@craig-at-smash-balloon)

    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.

    Plugin Contributor Craig at Smash Balloon

    (@craig-at-smash-balloon)

    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.

    Plugin Contributor Craig at Smash Balloon

    (@craig-at-smash-balloon)

    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 🙂

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Feed Distorting Images on Mobile’ is closed to new replies.