Two columns on mobile

  • Resolved sonicadvisor

    (@sonicadvisor)


    8 years, 2 months ago

    Hi there,

    I am wanting to display two columns on screen smaller than 480 and added the CSS below which achieves this, but the height is not changing accordingly, the height is bigger than expected. Can you please advise if there is something I may have missed.

    Many thanks!

    @media (max-width: 480px)
    #sb_instagram.sbi_col_10 #sbi_images .sbi_item, #sb_instagram.sbi_col_3 #sbi_images .sbi_item, #sb_instagram.sbi_col_4 #sbi_images .sbi_item, #sb_instagram.sbi_col_5 #sbi_images .sbi_item, #sb_instagram.sbi_col_6 #sbi_images .sbi_item, #sb_instagram.sbi_col_7 #sbi_images .sbi_item, #sb_instagram.sbi_col_8 #sbi_images .sbi_item, #sb_instagram.sbi_col_9 #sbi_images .sbi_item {
    width: 50%;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Craig at Smash Balloon

    (@craig-at-smash-balloon)

    Try adding this javascript to the “Custom Javascript” area on the “Customize” tab for Instagram Feed:

    jQuery(window).resize(function(){
  jQuery('#sb_instagram .sbi_photo').css('height', jQuery('#sb_instagram .sbi_photo').eq(0).innerWidth() );
});
setTimeout(function(){
jQuery('#sb_instagram .sbi_photo').css('height', jQuery('#sb_instagram .sbi_photo').eq(0).innerWidth() );
}, 500);
    Thread Starter sonicadvisor

    (@sonicadvisor)

    Many thanks Craig!

    The custom jQuery seems to be working, however the divs keep seeming to be intermittently switching between correct height and incorrect height (height is too tall as per previously).

    Plugin Author Craig at Smash Balloon

    (@craig-at-smash-balloon)

    Hey again,

    Sorry I seemed to have missed that you responded! Could you send me a link to the page so I can take a look? If you’d rather not post that here. We have a contact form:

    https://smashballoon.com/instagram-feed/support/

    Thread Starter sonicadvisor

    (@sonicadvisor)

    Thanks Craig. Seems to work ok if page is initially loaded at smaller size, but not when resized after loaded. Will send link via contact form.

    Thanks again!

    Plugin Author Craig at Smash Balloon

    (@craig-at-smash-balloon)

    Sounds good!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Two columns on mobile’ is closed to new replies.