2 column image stacking on mobile?

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

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

}

Can you share link to page in screenshot?