Making Instagram on mobile show 3 images per row

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>

YOU ARE THE CHAMPION!!!!! Worked like a charm, thank you so much!!!

On 12/20/2019 at 6:05 AM, tuanphan said:

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

 

Hi @tuanphan, 

this works great except it's chopping off my instagram post image.  the fr approach doesn't work at all.  Any suggestions?

On 6/15/2023 at 10:33 PM, DevonHarris said:

Hi @tuanphan, 

this works great except it's chopping off my instagram post image.  the fr approach doesn't work at all.  Any suggestions?

Can you share link to your page?

Hi @tuanphan, 

I am working on a Squarespace website at the link below. 

https://clarinet-cinnamon-z982.squarespace.com/home

In the middle of web (Home) page at the link above, there is an Instagram block.

I would like to set up the Instagram block as 3-columns grid on tablets (min-width: 768px and max-width: 1024px). -- So, it would be 3 images per row and 3 rows on tablets. On the last row, there would be only 2 images since I set up only 8 Instagram posts to be loaded.

I have tried your code below, but with the code, the following happens: 3 images on the 1st row, only 1 image on the 2nd row, then 3 images on the 3rd row and only 1 image on the 4th row.

Could you help me to set up Instagram block on the tablets like this? --> 3 images on the 1st row, 3 images on the 2nd row, and 2 images on the 3rd row (because only 8 Instagram post is loading).

Thanks!

Quote

 

@media only screen and (min-width: 768px) and (max-width: 1024px) {

 div#block-yui_3_17_2_1_1688772101383_5491 .sqs-gallery-design-grid-slide {

 }
}

 

On 7/8/2023 at 9:53 AM, JSD2023 said:

Hi @tuanphan, 

I am working on a Squarespace website at the link below. 

https://clarinet-cinnamon-z982.squarespace.com/home

In the middle of web (Home) page at the link above, there is an Instagram block.

I would like to set up the Instagram block as 3-columns grid on tablets (min-width: 768px and max-width: 1024px). -- So, it would be 3 images per row and 3 rows on tablets. On the last row, there would be only 2 images since I set up only 8 Instagram posts to be loaded.

I have tried your code below, but with the code, the following happens: 3 images on the 1st row, only 1 image on the 2nd row, then 3 images on the 3rd row and only 1 image on the 4th row.

Could you help me to set up Instagram block on the tablets like this? --> 3 images on the 1st row, 3 images on the 2nd row, and 2 images on the 3rd row (because only 8 Instagram post is loading).

Thanks!

 

 

Use this code instead

/* Tablet instagram */
@media screen and (max-width:1024px) and (min-width:768px) {
div#block-yui_3_17_2_1_1688774563160_73455 .slide {
    width: 33.333% !important;
    clear: none !important;
}
div#block-yui_3_17_2_1_1688774563160_73455 .slide:nth-child(3n+1) {
    clear: left !important;
}
}

THANK YOU SO MUCH!!

Oh, could you help me on one more subject pretty please?

On the web page at the link below, there is a contact form.

https://clarinet-cinnamon-z982.squarespace.com/hansem-travel-contact-info

When an user is typing (putting text) into the fields, the active field is highlighted with kind of thick outline of the field. (Please see the attached screenshot.)

I don't like that outline and I am trying to figure out how to get rid of highlighting the active field with the black thick outline.

If you can, please help me on this as well.

Than you so much.

I figured it out ... with your code from one of the old threads! ^^; THANKS @tuanphan!

I'm having the same issue - want 3 instagram images to show on the mobile view instead of two.  My website is www.thestoryweddings.com - thank you so much !!

On 4/1/2024 at 7:16 PM, sarah1144 said:

I'm having the same issue - want 3 instagram images to show on the mobile view instead of two.  My website is www.thestoryweddings.com - thank you so much !!

Use a CSS code like this

@media screen and (max-width: 767px) {
    .instagram-block .slide {
        width:33.33% !important;
    }
    .instagram-block .slide:nth-child(3n+1) {
        clear: left !important;
    }
}