Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Display Instagram as 3 columns in Mobile view


Recommended Posts

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.

Insta Mobile View_Current.JPG

Insta Mobile View_Desired.JPG

Edited by Creativore
Link to comment

Can you share link to your site?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1 month later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 2 weeks later...
  • 5 months later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
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:)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...