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

Question

So please bear with me as I'm a novice when it comes to CSS or any of this. I've been trying to google answers for the past few hours now to no avail. Essentially I'm just looking to have 1:1 images, with a title and a description, stacked in 2 columns on mobile.

A gallery grid does basically what I want on desktop and mobile - but doesn't show descriptions. A summary block does it too but stacks one image on top of another and when I have 60+ images, it becomes a huge scroll. I have not been able to find solutions to either of these issues so if you have a solution to either instead it'd be greatly appreciated.

So now, I've just succumbed to doing individual image stacks. I've found out how to shrink the image blocks just in mobile, however I still can't them to form rows/columns despite the extra room now they have on the right (as seen in the screenshot). The code I'm using is below.

Any insight would be greatly appreciated.

alt text

alt text

screen-shot-2019-09-03-at-10101-pm.jpg.2c83431198a2299f23e032072954cee5.jpg

screen-shot-2019-09-03-at-10603-pm.png.b5af66d6894ad61b5a001dc8d559f734.png

Edited by pashapasha
Initial Revision

Share this post


Link to post

Recommended Posts

  • 0

Hello

Have you figure this out? I came across the exactly same problem!! 
 

fay 

Share this post


Link to post
  • 0

I need to find out how to do this too, I'm using 7.1. @tuanphan could you please check this for me? Would really appreciate it!

So rather than these images stack in mobile version, I'd like two side by side:

https://denim-khaki-tp4d.squarespace.com/gallery-test

https://denim-khaki-tp4d.squarespace.com/gallery

One page is a gallery, the other is just image blocks as they needed captions underneath.

Many thanks!

 

 

Share this post


Link to post
  • 0
20 hours ago, laurenruth1 said:

I need to find out how to do this too, I'm using 7.1. @tuanphan could you please check this for me? Would really appreciate it!

So rather than these images stack in mobile version, I'd like two side by side:

https://denim-khaki-tp4d.squarespace.com/gallery-test

https://denim-khaki-tp4d.squarespace.com/gallery

One page is a gallery, the other is just image blocks as they needed captions underneath.

Many thanks!

 

 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5e849c35a5dfdd3303f2ed75>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

@tuanphan This works, thanks so much! Is there any way of making the squares bigger and not as much padding between them? And how would I change the caption size for mobile so it's small underneath each image? Many thanks! Really appreciate it 🙂

image.png.392b805b498140ae3b8341310793849c.png

Share this post


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

@tuanphan This works, thanks so much! Is there any way of making the squares bigger and not as much padding between them? And how would I change the caption size for mobile so it's small underneath each image? Many thanks! Really appreciate it 🙂

 

@media screen and (max-width:767px) {
div#page-section-5e849c35a5dfdd3303f2ed75>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5e849c35a5dfdd3303f2ed75 .image-block {
    padding: 5px;
}
div#page-section-5e849c35a5dfdd3303f2ed75 .image-block * {
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 0;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
4 hours ago, tuanphan said:

@media screen and (max-width:767px) {
div#page-section-5e849c35a5dfdd3303f2ed75>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5e849c35a5dfdd3303f2ed75 .image-block {
    padding: 5px;
}
div#page-section-5e849c35a5dfdd3303f2ed75 .image-block * {
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 0;
}
}

 

Works perfectly, you are a genius! Thanks so much!

Share this post


Link to post
  • 0
On 4/16/2020 at 8:53 PM, wkw said:

Hello @tuanphan, wondering if you could help with the same issue on the homepage image/buttons https://pike-helicon-sgrw.squarespace.com/ . really don't want them stacking on mobile! 

 

 

Sorry for delay. Have you solved yet?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
32 minutes ago, wkw said:

Thanks mate, - link is https://pike-helicon-sgrw.squarespace.com/ and password is 'wkw' 🙂

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5e8f52f652f1a1428efe454f>.row:nth-child(2) .span-2 {
    float: left !important;
    width: 50% !important;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
Posted (edited)

Similar issue. I have a grid gallery I want to have 3 columns on mobile, can anyone help with the css? 

Right now, I'm using this css and it's making the images smaller but only in one column (mobile).

 

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

 

url is maverickmpp.com/home-copy

Edited by MaverivckMPP

Share this post


Link to post
  • 0
On 4/27/2020 at 1:32 AM, MaverivckMPP said:

Similar issue. I have a grid gallery I want to have 3 columns on mobile, can anyone help with the css? 

Right now, I'm using this css and it's making the images smaller but only in one column (mobile).

 

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

 

url is maverickmpp.com/home-copy

Hi Maverick,

Please try adding this code to Design > Custom CSS:

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

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

}

Share this post


Link to post
  • 0

Hi, 

 

I have the same issue with my home page. My site is www.muroblanco.mx and I want the images to stack in two columns instead of one when displayed in mobile.

Can you help me with the code?

 

Thanks!

Share this post


Link to post
  • 0
Posted (edited)
On 5/24/2020 at 9:56 PM, LXK said:

Hi Maverick,

Please try adding this code to Design > Custom CSS:

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

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

}

@tuanphan I'm soo hoping you can help with this!

Oh my goshhh!! This was the only code from my 2 hours or searching and trialling that made any change to anything I was doing. BUT it's all so wonky.

It's not centered/balanced, and the first image at the start of each row is larger than the rest. Hope you can help! Eeeee I finally feel like I'm getting close. 

It's still in a test site so I don't have a URL for you sorry.

This is the code I'm using

 

@media only screen and (max-width: 640px)
  {.gallery-grid-wrapper {
      width: 33.33% !important;
      clear: none !important;
   
  }
  }
@media only screen and (max-width: 640px) { 

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

}

Screen Shot 2020-06-03 at 12.43.15 pm.png

Edited by Trishyeah
Wanted to tag Tuanphan :)

Share this post


Link to post
  • 0

Hi @tuanphan, I wonder if you can help me also.  Firstly I cannot get columns to work on the product pages of the desktop site (I have used the style format to try to create 3 columns but it does nothing).  I would also like the mobile site to display as 2 columns and for suggested items within the product block to display in columns.

https://www.unarodden.com/

I realise I'm asking a lot here, but any help would be greatly appreciated

Share this post


Link to post
  • 0
49 minutes ago, katie_w_3 said:

Hi @tuanphan, I wonder if you can help me also.  Firstly I cannot get columns to work on the product pages of the desktop site (I have used the style format to try to create 3 columns but it does nothing).  I would also like the mobile site to display as 2 columns and for suggested items within the product block to display in columns.

https://www.unarodden.com/

I realise I'm asking a lot here, but any help would be greatly appreciated

I see 3 columns here, you try clearing browser cache

with 2 columns on mobile, add this code to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
Posted (edited)
25 minutes ago, tuanphan said:

I see 3 columns here, you try clearing browser cache

with 2 columns on mobile, add this code to Home > Design > Custom CSS


@media screen and (max-width:767px) {
.list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

 

 

Unfortunately @tuanphan, I still cannot see 3 columns after clearing my cache, but the code for mobile worked  a treat, so thank you very much for that!

Edited by katie_w_3

Share this post


Link to post
  • 0
On 5/29/2020 at 2:40 AM, AlejandraMuller said:

Hi, 

 

I have the same issue with my home page. My site is www.muroblanco.mx and I want the images to stack in two columns instead of one when displayed in mobile.

Can you help me with the code?

 

Thanks!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-5ecd994795a4d74aea940bfe>.row>.span-4 {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
div#page-5ecd994795a4d74aea940bfe>.row>.span-4 .image-block-wrapper {
    padding-bottom: 100% !important;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
21 hours ago, Trishyeah said:

@tuanphan I'm soo hoping you can help with this!

Oh my goshhh!! This was the only code from my 2 hours or searching and trialling that made any change to anything I was doing. BUT it's all so wonky.

It's not centered/balanced, and the first image at the start of each row is larger than the rest. Hope you can help! Eeeee I finally feel like I'm getting close. 

It's still in a test site so I don't have a URL for you sorry.

This is the code I'm using

 

@media only screen and (max-width: 640px)
  {.gallery-grid-wrapper {
      width: 33.33% !important;
      clear: none !important;
   
  }
  }
@media only screen and (max-width: 640px) { 

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

}

Screen Shot 2020-06-03 at 12.43.15 pm.png

Can you share link to page in screenshot?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

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