Portfolio grid 2 columns mobile

Site URL: https://www.faceplusform.com/

Hello, can anyone help me with the code for the portfolio grid on my homepage? I was able to adjust buttons to 2 columns on mobile, but I have difficulty finding the right solution for the portfolio showing in 2 or 3 columns on mobile?

Also the same question for any section on the website that has 3 or 4 images (not gallery sections), how can I display them in 2 or 3 columns?

You can use this custom css, also what is your other images section?

@media screen and (max-width: 767px) {
  .portfolio-grid-overlay {
      grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

30 minutes ago, bangank36 said:

You can use this custom css, also what is your other images section?

@media screen and (max-width: 767px) {
  .portfolio-grid-overlay {
      grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

 

Thank you for the answer but it is not working!  I have already tried this code, and now I have tried it again but it doesn't change anything even when I target this section.

1 minute ago, Ladybug said:

Thank you for the answer but it is not working!  I have already tried this code, and now I have tried it again but it doesn't change anything even when I target this section.

have you added it to the page? I dont see the code there

3 minutes ago, bangank36 said:

have you added it to the page? I dont see the code there

I have added to the Custom CSS.

4 minutes ago, Ladybug said:

I have added to the Custom CSS.

I saw your code there an it working on mine browser

Maybe it takes more time to work! How would you solve last section in footer so it displays text in 2 columns also? Thank you!

17 minutes ago, Ladybug said:

Maybe it takes more time to work! How would you solve last section in footer so it displays text in 2 columns also? Thank you!

@media screen and (max-width: 767px) {
  .portfolio-grid-overlay {
      grid-template-columns: repeat(2,minmax(0,1fr));
  }
  section[data-section-id="5f2eff4be7555e0b38f3f9e6"] [data-type="page-section"] > .row {
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
  }
  section[data-section-id="5f2eff4be7555e0b38f3f9e6"] [data-type="page-section"] > .row .span-3 {
    flex-grow: 1;
    width: 50% !important;
  }
  section[data-section-id="5f2eff4be7555e0b38f3f9e6"] [data-type="page-section"] > .row .row {
    width: 100% !important;
  }
}

5 minutes ago, bangank36 said:

 

Everything is working perfectly, thank you so much!

Hi @bangkank36,

i am having the same issue for https://giraffe-fife-xnsh.squarespace.com/

The code doesn't seem to change anything is there a chance that other code could be overriding and preventing it from working?

Thanks

On 4/22/2021 at 10:35 PM, Billy1996 said:

Hi @bangkank36,

i am having the same issue for https://giraffe-fife-xnsh.squarespace.com/

The code doesn't seem to change anything is there a chance that other code could be overriding and preventing it from working?

Thanks

Add to Design > Custom CSS

/* Portfolio mobile 2 items */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr) !important;
}
}

Hey @tuanphan!

I've implemented this code plus a couple of other additions to help with styling on mobile. However, I noticed that desktop started changing as well, but I'd prefer there be no styling changes done on desktop. Any help you can provide would be great!

jala-t.squarespace.com
pass: jala

/* Portfolio mobile 2 items */
@media screen and (max-width:767px) .portfolio-grid-overlay {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
	grid-column-gap: 23px!important;
  	padding-top: 22px!important;
}

Thanks,
Zach

2 hours ago, zachmcnair said:

Hey @tuanphan!

I've implemented this code plus a couple of other additions to help with styling on mobile. However, I noticed that desktop started changing as well, but I'd prefer there be no styling changes done on desktop. Any help you can provide would be great!

jala-t.squarespace.com
pass: jala

/* Portfolio mobile 2 items */
@media screen and (max-width:767px) .portfolio-grid-overlay {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
	grid-column-gap: 23px!important;
  	padding-top: 22px!important;
}

Thanks,
Zach

Your code is invalide, missing some { symbol. It should be

/* Portfolio mobile 2 items */
@media screen and (max-width:767px) {
.portfolio-grid-overlay {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
	grid-column-gap: 23px!important;
  	padding-top: 22px!important;
}
}

On 11/8/2020 at 3:16 PM, bangank36 said:

@media screen and (max-width: 767px) {
  .portfolio-grid-overlay {
      grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

Hello - I've tried this on my site www.toolshed.london to get two columns on mobile but it doesn't seem to work. Can someone check please?

Update - it seems to work - must take a while to propagate?

Hi! 
I am struggling with the same thing; wanting to adjust the portfolio site to 2-columns. I 

I've used this code and I just make it half the size, but I want the projects to be placed next to each other. How do I do that?

Site: tan-octopus-ltp6.squarespace.com

Password: squarespacesite

/* 2 Column Portfolio Grid */
@media only screen and (max-width:640px) {
section[data-section-id="6374d66e5a73530ba9873521"] {
  display: flex;
  flex-wrap: wrap;
justify-content: space-between;
  width: 50%;
}
  }

18 hours ago, EbbaHar said:

Hi! 
I am struggling with the same thing; wanting to adjust the portfolio site to 2-columns. I 

I've used this code and I just make it half the size, but I want the projects to be placed next to each other. How do I do that?

Site: tan-octopus-ltp6.squarespace.com

Password: squarespacesite

 

/* 2 Column Portfolio Grid */
@media only screen and (max-width:640px) {
section[data-section-id="6374d66e5a73530ba9873521"] {
  display: flex;
  flex-wrap: wrap;
justify-content: space-between;
  width: 50%;
}
  }

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="6374d66e5a73530ba9873521"] {
    width: 100%;
  }

  .portfolio-grid-overlay {
    grid-template-columns: repeat(2,1fr)
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

My testing

When you're testing it it looks exactly like I want to, but it doesn't work for me... 😞

I can code the section from section-id, but it seems like the portfolio-grid-overlay coding doesn't work.

I check that it works now on your site

Have you checked it on live site/ Incognito mode?

Yes it does! Thank you a lot 🙂 It seems like it took a while for it to apply? Anyhow, thanks for the help!