How to customize mobile view

Hey ,

I’ve put together a CSS snippet which will achieve this for you. Could you add the following to the plugin’s Custom CSS section, which is on the plugin’s Customize page, and let me know whether it does that for you:

@media(max-width: 600px){
  #sb_instagram #sbi_images .sbi_item{ display: none; }
  #sb_instagram #sbi_images .sbi_item:nth-child(-n+6){ display: inline-block; }
  #sb_instagram #sbi_images .sbi_item { width: 33% !important; }
}

I’ve tested this on a test site of mine and it displays 3 columns/2 rows on mobile.

Let me know if that works, and I hope you’re having a good day!

John

It works perfectly!!
Thank you so much! ??

You’re very welcome ??

No obligation, but if you like the plugin and support you received would you consider leaving a really quick review? It really helps to support the ongoing development of the plugin!

If you have any other questions then just let me know, and I hope you’re having a good week.

John

Thant’s brilliant.
I wanted nine (3×3)so I changed it to:

@media(max-width: 600px){
#sb_instagram #sbi_images .sbi_item{ display: none; }
#sb_instagram #sbi_images .sbi_item:nth-child(-n+9){ display: inline-block; }
#sb_instagram #sbi_images .sbi_item { width: 33% !important; }
}

Awesome, happy to hear it came in handy for you too ??

John