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

Making Instagram on mobile show 3 images per row


eclemons

Question

My website www.emergingmethodism.com has an Instagram block on it, with 9 images in the grid. I need it to look the same on mobile as it does on desktop - with 3 rows of 3 images - but I don't know how to write the custom CSS for it.

Edited by eclemons
Initial Revision
Link to comment

Recommended Posts

  • 4

@eclemons @Etrenoir @Creativore Add this to Home > Design > Custom CSS

(Each site  will need different block ID. This code for @eclemons site)

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1565372617118_21335 .sqs-gallery-design-grid-slide {
    width: 33.33% !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
  • 1
5 minutes ago, roseys_eyewear said:

I'm a noob, where does this get pasted? I pasted in Design>CSS and it didnt work

Each site has different block ID. So you should share url to check.

if you don't want to share url, you can add this code to Home > Design > Custom CSS, not sure it will work.

@media screen and (max-width:640px) {
.sqs-gallery-design-grid-slide {
    width: 33.33% !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
  • 1
3 hours ago, sashapasta said:

Hi @tuanphan, I'm struggling with the same issue. 

I'm on v7.1, please could you help me with a code for my mobile version? It's showing width of two on mobile, I'd like it to show three.

It's sashapasta.co.uk, I've messaged you the password.

🙂

Look delicious. Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-008f42bfe2ae9d11e489 .slide {
    width: 33.33% !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
  • 0
On 12/20/2019 at 5:05 AM, tuanphan said:

 Add this to Home > Design > Custom CSS

(Each site  will need different block ID. This code for @eclemons site)


@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1565372617118_21335 .sqs-gallery-design-grid-slide {
    width: 33.33% !important;
}
}

 

@tuanphan I am looking to do the same thing on the bottom of my site at www.aricraven.com if you're able to help with the custom code block ID. Thank you so much! 

Link to comment
  • 0
11 minutes ago, aricraven said:

@tuanphan I am looking to do the same thing on the bottom of my site at www.aricraven.com if you're able to help with the custom code block ID. Thank you so much! 

It seems you solved? I see 3 items/row here.

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
  • 0

Hi @tuanphan, I'm struggling with the same issue. 

I'm on v7.1, please could you help me with a code for my mobile version? It's showing width of two on mobile, I'd like it to show three.

It's sashapasta.co.uk, I've messaged you the password.

🙂

Edited by sashapasta
Link to comment
  • 0
17 hours ago, Lsoper said:

Hi there,

struggling with the same issue - please help!!

lellasoper.com

THANK YOU!!

Where is instagram? Can you take a screenshot?

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
  • 0

Hi @tuanphan please help me too! I couldn't figure out how to get my IG gallery to show three on mobile either (v7.1). My site is houseofzeus.ca and I messaged you with the password. Thanks a bunch!

Edited by HoZ
missing tag
Link to comment
  • 0
1 hour ago, michael_bates said:

Can anyone help me add a 3x3 grid view for Instagram mobile view with my squarespace site? https://www.wb-retail.com/product-design-rendered-displays 

 

Thanks,

Michael

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.instagram-block .sqs-gallery-design-grid-slide {
    width: 33.33% !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
  • 0
22 minutes ago, backcountrybill said:

Can anyone tell me how to change my Instagram to 3 columns. I can't find the block ID myself.

Thanks

https://www.rogueotter.com/contact

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.instagram-block .sqs-gallery-design-grid-slide {
    width: 33.33% !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
  • 0

Hi @tuanphan- I'd like to show 3 images (instead of 2) in a row on mobile, like it is on desktop. Not in an Instagram block, but for a normal image block. Here is the page: https://schmidt101.com/new-page. I tried the code that you mentioned, but it didn;t work. 

Thank you so much for your help, keep up the great work!

Andre

Link to comment
  • 0
22 hours ago, AndreSchmidt said:

Hi @tuanphan- I'd like to show 3 images (instead of 2) in a row on mobile, like it is on desktop. Not in an Instagram block, but for a normal image block. Here is the page: https://schmidt101.com/new-page. I tried the code that you mentioned, but it didn;t work. 

Thank you so much for your help, keep up the great work!

Andre

Add to New Page Header

<style>
  @media screen and (max-width:767px) {
  .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
  }
</style>

image.thumb.png.339a53cc05c27597d58f34d1e8e3ea7b.png

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
  • 0
2 minutes ago, tuanphan said:

Add to New Page Header


<style>
  @media screen and (max-width:767px) {
  .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
  }
</style>

image.thumb.png.339a53cc05c27597d58f34d1e8e3ea7b.png

YOU ARE THE CHAMPION!!!!! Worked like a charm, 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...