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

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

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

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.

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 detail answer. / How to Setup Password & Share URL

--- Happy New Year

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.

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 detail answer. / How to Setup Password & Share URL

--- Happy New Year

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

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 detail answer. / How to Setup Password & Share URL

--- Happy New Year

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!

Link to post
  • 0

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

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

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

Create an account or sign in to comment

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


×
×
  • Create New...