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

How to make Gallery Grid 2 Columns on Mobile [Paloma Template]


maxdobbs

Question

Hi all,

I'm using the Paloma template for my website gohoopday.com. If you scroll down to the sixth fold, you'll see tons of logos. On mobile, these stack (1 per row), which isn't very mobile-friendly. I am trying to get 2 or 3 per row for mobile.

On a previous site with a different template, I used a formula similar to the ones listed in the link below, but on this template it's not registering.

I've tinkered around and tried this, but it only pushes the logos to the left rather than creating 2 columns.

@media only screen and (max-width: 640px) {
.gallery-grid-item { 
   width: 50% !important;
  }
}

I am wondering if it is because this is a gallery page vs an image gallery.

Anyways, I cannot figure it out - please let me know if you can help!

Max

Link to comment

Recommended Posts

  • 2

Hey Folks!  In 7.1 galleries are set up differently than they used to be in 7.
Long story short, it is no longer a width % or px issue, it's actually a setting that says how many are being displayed in a row.

The snippet below will specify the # of columns displayed - 2 in this example. And to apply this only to a gallery in one specific page section, you can use that section id first.

So... this code to target all grids galleries:

@media only screen and (max-width: 640px) { 
.gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;}]


Or this version for just the one section:

@media only screen and (max-width: 640px) {
[data-section-id="123456789"] .gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;}}

One SUPER important thing I want to mention - i am sure you all noticed that we get a mobile preview and a desktop preview... and thats it! It turns out that 7.1 was designed with one main break point at 991; so double check when your galleries are moving down to one and adjust that 640 accordingly ♥ #protip

Anywho, hope that helps! Let me know how it goes 🙂

Code queen and CSS behind InsideTheSquare.co

😃 Free CSS tutorials: insidethesquare.co/tutorials-for-squarespace
🥳 Free 7.1 training course: itssevenone.com/training
👍 CSS Cheat Sheet - codes for 7 & 7.1: insidethesquare.co/css
📚 CSS for Squarespace course: customcodeacademy.com

Link to comment
  • 0
1 hour ago, tuanphan said:

grid-column-gap: 5px;

grid-row-gap: 5px;

Thanks Tuanphan!

I've inputted this incorrectly as it's not changing - could you advise on this?

@media only screen and (max-width: 640px) { 
.gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;
grid-column-gap: 5px;
grid-row-gap: 5px; }
}

Thanks.

Link to comment
  • 0
On 5/19/2020 at 12:01 AM, LXK said:

Thanks Tuanphan!

I've inputted this incorrectly as it's not changing - could you advise on this?

@media only screen and (max-width: 640px) { 
.gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;
grid-column-gap: 5px;
grid-row-gap: 5px; }
}

Thanks.

Did you solve? I can't see gallery

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 5/20/2020 at 12:30 PM, tuanphan said:

Did you solve? I can't see gallery

Hi Tuanphan, 

I didn't solve this.

Did I add your code into the right place within my original code?

@media only screen and (max-width: 640px) { 
.gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;
grid-column-gap: 5px;
grid-row-gap: 5px;
}
}

Thank again for your help.

Link to comment
  • 0
On 5/22/2020 at 10:16 PM, LXK said:

Hi Tuanphan, 

I didn't solve this.

Did I add your code into the right place within my original code?

@media only screen and (max-width: 640px) { 
.gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;
grid-column-gap: 5px;
grid-row-gap: 5px;
}
}

Thank again for your help.

It seems you solved?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
9 minutes ago, LXK said:

Sure, thanks for your help with this.
https://www.cbhousedoctor.com/the-getaway-collection/biscaia-ocean-villa
PW: New-Dev!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
figure.gallery-grid-item {
    padding-bottom: 0;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
2 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
figure.gallery-grid-item {
    padding-bottom: 0;
}
}

 

It's solved! 

I really appreciate your help on this, have a great day!

Link to comment
  • 0
On 5/26/2020 at 6:14 PM, haidar said:

Guys please give me more details, where should inject this code exactly, and should modify it to fit my products list and my galleries ? 

please help

Add to Home > Design > Custom CSS

Can you share link to product list page & gallery page?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 6/5/2020 at 6:44 AM, alexandmattcreative said:

Hey there, I'm in a pickle and I need to action the following. Mt client wants their products to display 2 across on mobile shop page, not the stack. Is this possible? Thanks in advance!

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

Today, I noticed that Masonry and Simple Grid gallery sections default to two columns on mobile. However, the Grid: strips is one column on mobile. Has anyone managed two or three columns on mobile for the Grid: strips? @inside_the_square or @tuanphan you folks seemed to have worked with the CSS a bit. I've been targeting the .gallery-strips-item wrapper and .gallery-strips-item but haven't been able to get it to work and would appreciate other eyes.

 

Edited by JasonGipson
Link to comment
  • 0

@JasonGipson

/* Add this code to Design -> Custom CSS */
 


@media(max-width:767px) {
.gallery-strips-item {
    width: 100% !important;
    position: unset !important;
    transform: unset !important; 
}

.gallery-strips-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    height: unset !important;
}

}

Result:

image.thumb.png.bb41022e72dc3ada673b90b46b2e25ad.png

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

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...