Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Portfolio grid 2 columns mobile


Ladybug

Question

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 post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

Everything is working perfectly, thank you so much!

Posted Images

8 answers to this question

Recommended Posts

  • 0

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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post

Create an account or sign in to comment

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


×
×
  • Create New...