Instagram feed – 2 column on mobile

[martypharty]

Hi Support,

Is there any way to have the (social) Instagram feed widget display as a 2 column grid on mobile, ideally displaying 6 images rather than 5?

At the moment when a desktop browser is re-sized to mobile width, it does display as 2 columns (however still only 5 images), but then on an actual mobile device, the feed is only 1 column and displays 5 images.

Any help with this is greatly appreciated!

Martin.

[David Martin – Support]

Hi,

The columns can be adjusted on mobile with CSS but not the amount of images output, at least not reliably. What’s the URL, I’ll see if I can provide the CSS for you.

– David.

[martypharty]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

No isntagram images are loading for me? http://d.pr/i/1c5pH/31uMUdC0

Have you made all updates?

– Kyle

[martypharty]

Hi Kyle,

Ah, this is very strange! I wasn’t actually aware of this issue.

What browser(s) are you using – We’ve been using Chrome (Version 51.0.2704.106 (64-bit)) and Safari (Version 9.1.1 (11601.6.17)) and haven’t had this issue.

Martin.

[Kyle – SUPPORT]

Chrome and firefox, try clearing your cache

– Kyle

[martypharty]

Hi Kyle,

I’ve just tried again on both Chrome and Safari (after having cleared caches). I’ve also just downloaded Firefox and tried it there too and it still seems to be working..I am very confused!

Martin.

[Kyle – SUPPORT]

Working for me now, try adding this to your custom css:

@media only screen and (max-width: 479px) { 
.blog-grid-items .blog-item.col-sm-sf-5.instagram-item {
  width: 50%!important;
}
}

– Kyle

[martypharty]

Hi Kyle,

Ok, great that’s worked!

Any ides what was going on earlier with the content not displaying?

Martin.

[Kyle – SUPPORT]

Was a cache issue I needed to clear my cache

– Kyle

[gabyzulu99]

Hi there,

The code you gave for displaying 2 columns for instagram on mobile worked perfectly, but I was wondering if it is possible to display only 4 images on mobile instead of 5? Right now it is displaying 5 on desktop and mobile, but since its an odd number it doesnt look very nice on mobile with the 5th image.

Much appreciated!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

What is your URL?

[gabyzulu99]

http://www.zulu.co.id, would you like login details? Because that was only on preview mode and I haven’t published the instagram feed because of this issue. There isn’t a CSS code you can give to remove the 5th image for mobile?

Thanks

[Swift Ideas – Ed]

Hi @gabyzulu99

If you can add it to a test page on your site, and then provide us with the URL for that page, we’ll happily take a look and provide some CSS for you.

Thanks,

– Ed

[gabyzulu99]

Hi there,

I am unable to do it on a test site, though I will enable it for a little while so that you can figure out the CSS code for me.

Much appreciated

(www.zulu.co.id homepage is where the instagram feed is enabled btw)