Jump to content

Two image columns for mobile.

Recommended Posts

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.

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Link to comment
  • 4 weeks later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

 

IMG_0267.PNG

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

 

 

image.jpeg

image.jpeg

Link to comment
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.

 

 

image.jpeg

image.jpeg

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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?

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.