Display Instagram as 3 columns in Mobile view

Does anyone know how to display the Instagram block as 3 columns in mobile view?

Our Instagram feed is reliant on 3 images being showed side by side, so when SS automatically converts it to 2 columns - it breaks the flow of it entirely.

Using the Brine Template - have attempted CSS code but it appears the block natively converts to 2 columns regardless.

Edited December 20, 20195 yr by Creativore

Can you share link to your site?

On 12/20/2019 at 5:46 PM, tuanphan said:

Can you share link to your site?

Hey @tuanphan! I just saw your reply to @eclemons and adjusted the code to suit! It worked a treat mate. I was close before but was a little off in my css code. Thank you SOOOOO much. Legend!

6 hours ago, Creativore said:

Hey @tuanphan! I just saw your reply to @eclemons and adjusted the code to suit! It worked a treat mate. I was close before but was a little off in my css code. Thank you SOOOOO much. Legend!

So did you fix problem?

On 2/10/2020 at 11:16 PM, tuanphan said:

So did you fix problem?

Absolutely - but with your help! Thank you so much. 

On 2/10/2020 at 6:16 PM, tuanphan said:

So did you fix problem?

Hi @tuanphan  need your hep with my instagram images. One one my instagram image(the last)  Gets overlap on mobile view. here is the url:

https://www.elliedunnecollective.com/

please help.

Thank you

Edited August 18, 20204 yr by Asiya

1 hour ago, Asiya said:

Hi @tuanphan  need your hep with my instagram images. One one my instagram image(the last)  Gets overlap on mobile view. here is the url:

https://www.elliedunnecollective.com/

please help.

Thank you

Add to Home > Design > Custom CSS

/* Fix instagram mobile */
@media screen and (max-width:767px) {
.sqs-layout .sqs-gallery-design-grid-slide:nth-child(2n+1) {
    clear: left !important;
}
}

6 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

/* Fix instagram mobile */
@media screen and (max-width:767px) {
.sqs-layout .sqs-gallery-design-grid-slide:nth-child(2n+1) {
    clear: left !important;
}
}

 

Yes its working.  

Thank you so much:)