Jump to content

Portfolio grid 2 columns mobile

Recommended Posts

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?

Link to comment

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

 

image.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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));
  }
}

 

image.png

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.

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
4 minutes ago, Ladybug said:

I have added to the Custom CSS.

I saw your code there an it working on mine browser

image.thumb.png.779ce7431ad4a605723ca1e76a9fa011.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

image.png.6002aba69491082c72eb678dd50a4e92.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 5 months later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
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?

Link to comment
  • 10 months later...

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

Edited by EbbaHar
Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.6e5acc266b906c006225fd1e1c86e21c.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...

I check that it works now on your site

image.thumb.png.fde57df1d289e48b1c7ae53063ddd869.png

Have you checked it on live site/ Incognito mode?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.