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

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

Share this post


Link to post
  • 0

Difficult to help without sharing url.

Can you share link to gallery on your site?


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

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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

grid-column-gap: 5px;

grid-row-gap: 5px;


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

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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

Can you share link to gallery page? I don't see


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

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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

Share this post


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

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


Link to post
  • 0

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!

Share this post


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

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


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

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

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

 

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