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

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

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

Share this post


Link to post

16 answers to this question

Recommended Posts

  • 1

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

Share this post


Link to post
  • 0
On 2/18/2020 at 3:13 PM, tuanphan said:

Difficult to help without sharing url.

Can you share link to gallery on your site?

Hi Tuanphan,

I have managed to get mobile images to display x2 per columns on mobile with the below code.

@media only screen and (max-width: 640px) { 

.gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;}

}

I wondered if there's any advice on narrowing this gap between rows to make it the same thin spacing as the columns?

https://cbhd-dev-9ac7.squarespace.com/
PW: New-Dev!

Any help would be greatly appreciated.

Thanks.

Screen Shot 2020-05-18 at 14.20.31.png

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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?


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


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

It seems you solved?

Hi Tuanpahn,

I'm afraid not, still with the much wider rows gaps.

I tried inputting with the below code and nothing changed:

@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

 

Screen Shot 2020-05-25 at 13.23.31.png

Share this post


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

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 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!

Share this post


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