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! 🙂