2 column image stacking on mobile?

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.

Hello

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

fay 

13 hours ago, Fay said:

Hello

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

fay 

If you share link to your site, I can take a look

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!

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

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

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

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!

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! 

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?

Hey, no problem, I have not! Can you help?

13 hours ago, wkw said:

Hey, no problem, I have not! Can you help?

 

Your site is private. Can you setup password & share url again?

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

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

Thanks so much for that!

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

@tuanphan, I have poster images that I want side by side (2 column) on mobile.

Help!

Thank you in advance!

http://paiacommunityassociation-temp.squarespace.com/

Password: paia

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

}

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!

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

}

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

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

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!

7 hours ago, katie_w_3 said:

 

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!

Try other browsers.

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