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

Making Instagram on mobile show 3 images per row

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

Share this post


Link to post

22 answers to this question

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;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 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;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 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;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 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! 

Share this post


Link to post
  • 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.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


Link to post
  • 0
On 5/29/2020 at 3:11 PM, tuanphan said:

Look delicious. Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
div#block-008f42bfe2ae9d11e489 .slide {
    width: 33.33% !important;
}
}

@tuanphan ahhhhh thank you so much!! Worked a treat, thank you :-))))))

 

Share this post


Link to post
  • 0

Hi @tuanphan, I'm having the same issue. My Instagram block shows a width of two on mobile but I'd like it to show three.

I'm on v7.1, could you help me with the coding? 

My site is sarahsilva.ca 

Thanks!

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


Link to post
  • 0

@Sarahpsilva

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

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 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;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 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;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...