Two image columns for mobile.

Site URL: http://www.timjobling.co.uk

Hi, 

I've seen this question asked a few times on here but I can't find the answer I'm looking for. I would like my mobile site to display two image columns instead of one. All the code I have tried doesn't work, I'm struggling to find the right area of of page to target with the code  and I'm wondering if it's because I'm using image blocks for my layout rather than gallery pages. 

As always any help would be very much appreciated.

Thanks.

On 2/10/2022 at 5:20 AM, timjphoto said:

Site URL: http://www.timjobling.co.uk

Hi, 

I've seen this question asked a few times on here but I can't find the answer I'm looking for. I would like my mobile site to display two image columns instead of one. All the code I have tried doesn't work, I'm struggling to find the right area of of page to target with the code  and I'm wondering if it's because I'm using image blocks for my layout rather than gallery pages. 

As always any help would be very much appreciated.

Thanks.

You mean all images on homepage?

Hi Tuanphan, 

Yes that's correct, currently all images on my homepage display in a single column, I would much prefer if they were in two columns of smaller images. I'm using image blocks instead of a gallery but I don't mind if the images are not in the same order as on desktop site. It would be great if all image pages on the site displayed in two columns.

Thanks for your help. 

Tim.

@tuanphan @timjphoto Having the same problem! Website is https://sam-comen.squarespace.com

On 3/12/2022 at 9:30 AM, PatrickJ said:

@tuanphan @timjphoto Having the same problem! Website is https://sam-comen.squarespace.com

You want (mobile)

• 2 columns
• keep same layout 

is this right?

On 3/13/2022 at 6:01 AM, tuanphan said:

You want (mobile)

• 2 columns
• keep same layout 

is this right?

Correct!

19 hours ago, PatrickJ said:

Correct!

2 columnsmasonry is not possible. If you want to keep desktop layout, add this to Design > Custom CSS

/* Mobile Homepage Masonry */
@media screen and (max-width:640px) {
div#page-61f9bebbb53a1a2a3dce343d>.row>.span-4 {
    width: 33.3333% !important;
    float: left !important;
}
div#page-61f9bebbb53a1a2a3dce343d>.row>.span-8 {
    width: 66.6667% !important;
    float: left !important;
}
div#page-61f9bebbb53a1a2a3dce343d>.row>.span-8 .span-4 {
    width: 50% !important;
    float: left !important;
}
div#page-61f9bebbb53a1a2a3dce343d .span-6 {
    width: 50% !important;
    float: left !important;
}
div#page-61f9bebbb53a1a2a3dce343d .row:nth-child(4) .span-3 {
    width: 25% !important;
    float: left !important;
}
div#page-61f9bebbb53a1a2a3dce343d .row:nth-child(4) .span-9 {
    width: 75% !important;
    float: left !important;
}
div#page-61f9bebbb53a1a2a3dce343d .row:nth-child(4) .span-9 .span-5 {
    width: 55.5556% !important;
    float: left !important;
}
div#page-61f9bebbb53a1a2a3dce343d .row:nth-child(4) .span-9 .span-4 {
    width: 33.3333% !important;
    float: left !important;
}
}

Got it! Thanks @tuanphan! 

Sorry to hear that! Is it possible if we don't keep the same layout?

I don't know any way to keep same layout + 2 columns on mobile.

I would like to be able to make my images on mobile display in two columns too, I think it's a similar problem. I am using image blocks rather than gallery (so I could utilise the pinterest button on them.)

Site is https://buffalo-cheetah-355k.squarespace.com

Thank you!

On 9/8/2022 at 5:54 AM, R88 said:

I would like to be able to make my images on mobile display in two columns too, I think it's a similar problem. I am using image blocks rather than gallery (so I could utilise the pinterest button on them.)

 

Site is https://buffalo-cheetah-355k.squarespace.com

 

Thank you!

Try adding this to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-63046f4535920a1f8496fbde .span-4 {
    column-count: 2;
}
}

Thank you!

I would like to also do the same to my other page which has images:

https://buffalo-cheetah-355k.squarespace.com/illustration

What do I need to add to change that page too?

Also is it possible to add or change something so that the 'gap' in the middle is smaller?

So the layout looks like this?

Thank you for your help.

On 9/13/2022 at 9:02 AM, R88 said:

Thank you!

I would like to also do the same to my other page which has images:

https://buffalo-cheetah-355k.squarespace.com/illustration

What do I need to add to change that page too?

Also is it possible to add or change something so that the 'gap' in the middle is smaller?

So the layout looks like this?

Thank you for your help.

 

Try adding to Design > Custom CSS

/* mobile 2 columns */
@media screen and (max-width:767px) {
div#page-section-63040b5373a1554346e5697f .span-4 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 5px;
}
}

Thank you tuanphan - unfortunately that gap in the middle stayed the same size when I tried that. Also the other page is still one column, is there something else I need to add for that page to also go into two columns on mobile?

On 9/18/2022 at 1:15 PM, R88 said:

Thank you tuanphan - unfortunately that gap in the middle stayed the same size when I tried that. Also the other page is still one column, is there something else I need to add for that page to also go into two columns on mobile?

Each page need a different code. Can you share link to all pages where you have problem?

https://buffalo-cheetah-355k.squarespace.com/bespokestationery  and the other page: https://buffalo-cheetah-355k.squarespace.com/illustration

Thank you

17 hours ago, R88 said:

https://buffalo-cheetah-355k.squarespace.com/bespokestationery  and the other page: https://buffalo-cheetah-355k.squarespace.com/illustration

 

Thank you

I see you solved on https://buffalo-cheetah-355k.squarespace.com/bespokestationery ?

That page has the two columns for mobile now but I would still like the gap in the middle and between images to be smaller. Like the example I posted above, or like below:

1. is how it currently is

2. is mocked up how I would like the layout of the columns.

Hope that makes sense. Thank you for your help with this.

On 9/21/2022 at 7:19 AM, R88 said:

That page has the two columns for mobile now but I would still like the gap in the middle and between images to be smaller. Like the example I posted above, or like below:

 

1. is how it currently is

 

 

2. is mocked up how I would like the layout of the columns.

 

Hope that makes sense. Thank you for your help with this.

 

 

Try this CSS

@media screen and (max-width:767px) {
div#page-section-63046f4535920a1f8496fbde .span-4 .image-block {
    padding: 5px !important;
}
div#page-section-63046f4535920a1f8496fbde .span-4 {
    column-count: 2;
}
}

Thank you, that's definitely better however the grid is now uneven, is it possible to make the gap in the middle even smaller/the images larger so that the vertical gap between the columns is the same size as the horizontal gaps under each image?

On 9/22/2022 at 5:02 PM, R88 said:

Thank you, that's definitely better however the grid is now uneven, is it possible to make the gap in the middle even smaller/the images larger so that the vertical gap between the columns is the same size as the horizontal gaps under each image?

On 9/22/2022 at 5:02 PM, R88 said:

Thank you, that's definitely better however the grid is now uneven, is it possible to make the gap in the middle even smaller/the images larger so that the vertical gap between the columns is the same size as the horizontal gaps under each image?

Try this new code

@media screen and (max-width:767px) {
div#page-section-63046f4535920a1f8496fbde .span-4 .image-block {
    padding: 5px !important;
}
div#page-section-63046f4535920a1f8496fbde .span-4 {
    column-count: 2;
column-gap: 0;
}
}

Perfect! Thank you so much. How can I make this page the same now?

https://buffalo-cheetah-355k.squarespace.com/illustration

11 hours ago, R88 said:

Perfect! Thank you so much. How can I make this page the same now?

https://buffalo-cheetah-355k.squarespace.com/illustration

Use this new code for both pages

@media screen and (max-width:767px) {
div#page-section-63046f4535920a1f8496fbde, div#page-section-63040b5373a1554346e5697f {
.span-4 .image-block {
    padding: 5px !important;
}
.span-4 {
    column-count: 2;
column-gap: 0;
}}}

That worked great, thank you again for all your help.