iconosquare widget for insta

Support Area Forums Elite iconosquare widget for insta

Viewing 3 posts - 1 through 3 (of 3 total)
URL to the page in question: http://www.jkconditioning.com
  • Author
    Posts
  • #33996
    Jon Kawamoto
    Participant

    Hi Bill – I have the iconosquare widget on my home page to display my instagram feed. I altered the dimensions to fit in one of the layers on the desktop so it’s centred (see attached). However, on mobile, the size doesn’t get adjusted (see attached) and therefore cuts off half of the widget/layer.

    Do you have code that can show an insta feed that will fit both desktop and mobile versions of my site?

    #34009
    Bill Robbins
    Moderator

    Hi Jon,

    I hope you had a nice weekend. I took a look this morning and it appears that you switched up the widget there to be 1/3 column with Facebook and Twitter widgets next to it.

    I did notice that on smaller screens the images move to being in one column, but keeps the images the same size. You could keep them in two columns there if you want to. Here’s how to do that:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      @media all and (max-width: 480px){
        /* Make 3-6 cols into 2 col */
        #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{
          width: 50%;
        }
        /* Make 7-10 cols into 4 col */
        #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,
        #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
          width: 25%;
        }
      }
      
    3. Update your settings.

    Let me know if you run into any trouble.

    Have a great week,
    Bill

    #34031
    Bill Robbins
    Moderator

    Hey Jon,

    Glad that helped out some. The Facebook posts will be a bit tricky since they have a width hard coded into the HTML (that’s not overridable via CSS). What you could do is change the point at which the three columns become one column. Here’s how to do that:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      .one_third iframe {
      	max-width: 100%;
      }
      
      .sbi_col_3{
      	max-width: 100%;
      }
      
      
      @media screen and (max-width: 1023px) {
      	.full_width,
      	.one_half,
      	.one_third,
      	.two_third,
      	.one_fourth,
      	.three_fourth,
      	.one_fifth,
      	.two_fifth,
      	.three_fifth,
      	.four_fifth,
      	.one_sixth,
      	.five_sixth {
      		clear: both;
      		width: 100%;
      		margin-left: 0;
      		margin-right: 0;
      		margin-bottom: 1em;
      	}
      }
      
    3. Update your settings.

    Hope that helps out,
    Bill

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘iconosquare widget for insta’ is closed to new replies.