Gallery Block - Display 3 images per row on mobile devices

Site URL: https://www.centerpointfl.org

OK, so I have three social media platform buttons in a gallery block. I have them displayed 3 across, and a small size. Looks great on desktop and tablet, but on mobile it changes the gallery to display 2 icons across, incread of 3. I have tried MULTIPLE solutions and I can't get anything to work. Please help!

What I've tried:

/*To set the amount of slides for phones*/ @media screen and (max-width: 640px) { .sqs-gallery-block-grid.slide.sqs-gallery-design-grid-slide { width: calc(100%/

This produced no change at all. 

Also: 

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

It got it to three items but cut them into pieces.

I then modified it to:

@media only screen and (max-width: 640px) {
  .sqs-gallery-design-autogrid-slide {
     width: 33.3% !important;
     clear:right !important;
    }
  .sqs-gallery-block-grid {
      overflow: visible
    }
}

Did nothing. 

I don't know what else to try, so any help would be greatly appreciated. I am a coding toddler, so talk slowly in small words. 🙂 

Running Bryant template, in case that matters. 

Hi. I see fine here. Do you still need help on this?

15 hours ago, tuanphan said:

Hi. I see fine here. Do you still need help on this?

I finally fixed it yesterday--just came here to post!  Thanks for taking a look, though! I appreciate it!

Hey! Would you mind sharing how you were able to do this? Looking to do the same thing on mobile. Thank you!!

7 hours ago, lagomcreative said:

Hey! Would you mind sharing how you were able to do this? Looking to do the same thing on mobile. Thank you!!

If you share link to gallery, we can give the code

Thank you!

Website it here: https://www.madelinebroderick.com/en/about

password is "lagom" if prompted - it's the logo bar in the middle. I would like it to be 3 or 4 across on mobile if possible. Thank you!

19 hours ago, lagomcreative said:

Thank you!

Website it here: https://www.madelinebroderick.com/en/about

password is "lagom" if prompted - it's the logo bar in the middle. I would like it to be 3 or 4 across on mobile if possible. Thank you!

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1561473800639_35450 {
    margin-bottom: 0 !important;
}
div#block-yui_3_17_2_1_1561473800639_35450 .slide {
    width: 33.33% !important;
}
div#block-yui_3_17_2_1_1561473800639_35450 img {
    width: 100% !important;
    height: auto !important;
    vertical-align: middle;
    display: block;
}
}

Hi @tuanphan,

I have the same problem for the social media icons in the footer. On mobile version, they show 2 in a row and the third is under them (it's a gallery block). I would like to have the three icons on the same row, is it possible?

The link to the website: https://www.blanc-sa.ch/ (it's public so I don't think you need a code)

 You can find below the code I already insert to reduce the width, if it's useful:

#block-yui_3_17_2_1_1623830528904_56359{
  width: 30%!important;
  margin: auto!important
}

Thank you for your help!

20 hours ago, Bountie said:

Hi @tuanphan,

I have the same problem for the social media icons in the footer. On mobile version, they show 2 in a row and the third is under them (it's a gallery block). I would like to have the three icons on the same row, is it possible?

The link to the website: https://www.blanc-sa.ch/ (it's public so I don't think you need a code)

 You can find below the code I already insert to reduce the width, if it's useful:

#block-yui_3_17_2_1_1623830528904_56359{
  width: 30%!important;
  margin: auto!important
}

Thank you for your help!

Add to design > Custom CSS > Then save & reload the site

/* Mobile footer */
@media screen and (max-width:767px) {
footer.Footer .slide .margin-wrapper {
    margin: 0 !important;
}
footer.Footer .slide {
    width: 20% !important;
    margin-bottom: 50px;
}
}

4 hours ago, tuanphan said:

Add to design > Custom CSS > Then save & reload the site

/* Mobile footer */
@media screen and (max-width:767px) {
footer.Footer .slide .margin-wrapper {
    margin: 0 !important;
}
footer.Footer .slide {
    width: 20% !important;
    margin-bottom: 50px;
}
}

 

Thank you! 

I must be doing something wrong because I've tried numerous CSS variations to display 3 images per row on mobile and nothing changes with these logos/images. https://www.roamgeneration.com/results 

Is someone able to please help me out? 

Many thanks in advance x 

On 1/27/2022 at 10:52 AM, mintfresh said:

I must be doing something wrong because I've tried numerous CSS variations to display 3 images per row on mobile and nothing changes with these logos/images. https://www.roamgeneration.com/results 

Is someone able to please help me out? 

Many thanks in advance x 

You mean 48 logos on the page?

Hi @tuanphan, on my homepage of sentimentstudios.com (pw: concept) I have client logo's in the block called "Clients" which I would like to show on mobile view with 3-4 per row, instead of the current 2 per row. Could you advice me how to do this? Much thanks in advance! 

On 7/18/2022 at 7:42 PM, elwin5000 said:

Hi @tuanphan, on my homepage of sentimentstudios.com (pw: concept) I have client logo's in the block called "Clients" which I would like to show on mobile view with 3-4 per row, instead of the current 2 per row. Could you advice me how to do this? Much thanks in advance! 

Add to Design > Custom CSS > Then reload your site

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1638272182429_57131 .slide {
    width: 33.3333% !important;
}
}

3 items = 33.3333% (33.3333 x 3 = 100%)

4 items = 25% (4x 25 = 100%)

5 items = 20%

Dear @tuanphan, thank you very much! It worked very well! However, I was adviced to move the whole logo overview to sub-page https://www.sentimentstudios.com/about on the lowest block. Could you advice how to implement the same code as above there? Or for future, how I can identify a block like this myself to replace it in the code? Thank you so much in advance!

On 8/19/2022 at 3:46 AM, elwin5000 said:

Dear @tuanphan, thank you very much! It worked very well! However, I was adviced to move the whole logo overview to sub-page https://www.sentimentstudios.com/about on the lowest block. Could you advice how to implement the same code as above there? Or for future, how I can identify a block like this myself to replace it in the code? Thank you so much in advance!

div#block-yui_3_17_2_1_1638272182429_57131 is block id

Use this tool to find block id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Thank you! 🙂

Hi @tuanphan can you please help me with this? I would like the gallery under "our stallholders" to display 3 in a row on mobile: https://villagesquare.org.nz/parnell-farmers-market

Thank you :)

On 8/15/2023 at 6:35 AM, daniellegmuller said:

Hi @tuanphan can you please help me with this? I would like the gallery under "our stallholders" to display 3 in a row on mobile: https://villagesquare.org.nz/parnell-farmers-market

Thank you 🙂

Add this code to Design > Custom CSS or Website > Website Tools > Custom CSS

/* 3 items row mobile */
@media screen and (max-width:767px) {
    [data-section-id="64dab27d42367b77bad299b5"] .gallery-grid-wrapper {
        grid-template-columns: repeat(3,1fr) !important;
    }
}

Hi,

Can you share link to this page? We can check easier

On 9/25/2023 at 10:50 PM, squredev said:

Here's what I need to do: - Make the carousel image on the main banner always stick to the top and bottom section dividers - currently fine on desktop and mobile but on tablet, it becomes disconnected (see attached). -

Hi,

What is page url?

I was trying to do this for blog posts (client has a podcast and I needed to add 6 icons for the various platforms it's on). Since it's a grid gallery block that isn't in fluid engine, I played with @tuanphan's always brilliant code and came up with this that seems to work. If anyone sees any issues with it, please lmk!

NOTE: this will affect all gallery blocks on your site... this is okay for me since these are the only gallery blocks in use on the site. You'd need to target the individual blocks if you only want this code to affect certain gallery's!
 

// 3 Images Per Row On Mobile - 7.1 Version - blog posts (not fluid engine)//

@media only screen and (max-width: 640px) {
  .sqs-block-gallery .slide {
    width: 33.3333% !important;
  }
.sqs-block-gallery .img {
    width: 100% !important;
    height: auto !important;
    vertical-align: middle;
    display: block;
}
  }

I also need help with the same issue. My gallery of 3 images is being split across 2 rows on mobile. I want to keep it to a single row. Can you pleas help?

www.samwalkerfilm.com

Example below of how it appears on mobile vs desktop 

On 2/28/2024 at 10:52 PM, Swalkeroni said:

I also need help with the same issue. My gallery of 3 images is being split across 2 rows on mobile. I want to keep it to a single row. Can you pleas help?

 

www.samwalkerfilm.com

Example below of how it appears on mobile vs desktop 

Use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
	div.gallery-block .slide {
		width: 33.333% !important;
}
}