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

}