Two column image grid

Site URL: https://spinach-keyboard-w7ws.squarespace.com/fallsikringstjenester-test-3-three-column-two-column

Hello!

I've uploaded 6 images, and arranged them in three columns and two rows.

Squarespace brakes this into one column on mobile, which is fine.

But I would really like the images to display in two columns and three rows on tablet.

I have managed to do this here  (but on this page, there are four columns instead of three.)

But I´ve almost got it to work with three columns as well. This is how it displays on desktop:

This is how it displays on tablet:

As you can see, the images displays in two columns, but the very last image will not display in the grid as I want.

I think this is because when I build the grid in squarespace, I'm snapping the three last images to the images above (like this):

If I could snap the last image to the image on left instead, I think it would work. But when I do, the grid gets wrong (like this):

Any suggestions to this one?

10 hours ago, Erlend-fs said:

Site URL: https://spinach-keyboard-w7ws.squarespace.com/fallsikringstjenester-test-3-three-column-two-column

Hello!

I've uploaded 6 images, and arranged them in three columns and two rows.

Squarespace brakes this into one column on mobile, which is fine.

But I would really like the images to display in two columns and three rows on tablet.

I have managed to do this here  (but on this page, there are four columns instead of three.)

 

But I´ve almost got it to work with three columns as well. This is how it displays on desktop:

 

This is how it displays on tablet:

 

As you can see, the images displays in two columns, but the very last image will not display in the grid as I want.

I think this is because when I build the grid in squarespace, I'm snapping the three last images to the images above (like this):

 

If I could snap the last image to the image on left instead, I think it would work. But when I do, the grid gets wrong (like this):

 

Any suggestions to this one?

 

Why dont you use gallery instead?

Thanks for your reply bangank36.

You are correct. A gallery will scale from three -> two columns in a good way.

But I'm not getting the Captions to look the same in a gallery (see screenshot below).

I would like to have the captions on the image, like in my example in the previous post.

So if it could be possible to find a solution to my previous question, it would be great!

1 minute ago, Erlend-fs said:

Thanks for your reply bangank36.

You are correct. A gallery will scale from three -> two columns in a good way.

But I'm not getting the Captions to look the same in a gallery (see screenshot below).

I would like to have the captions on the image, like in my example in the previous post.

 

So if it could be possible to find a solution to my previous question, it would be great!

The caption of the gallery grid can be style to look like the image using custom css

Ok. That's great. 

But is there a way to get the image grid I have built to scale from three -> two columns also?

I'm using this grid in several other pages, and I have spent a lot of time to build it. So it would be great to use the same structure (if possible)

https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau

47 minutes ago, Erlend-fs said:

Ok. That's great. 

But is there a way to get the image grid I have built to scale from three -> two columns also?

I'm using this grid in several other pages, and I have spent a lot of time to build it. So it would be great to use the same structure (if possible)

https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau

I saw you use 3 rows, each has 4 columns images... since they are seperated, it can't be turned into 3 column using css

Sorry, I think you misunderstood. 

I'm very happy with this page: https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau

It scales from 4 to 2 columns to 1 column (depending on screen with).

I would really like to do the same with this page: https://spinach-keyboard-w7ws.squarespace.com/fallsikringstjenester

But on this page, I would like to have a three column grid (instead of four columns), that scales down to 2 column and 1 column (depending on screen width.

Is this possible?

On 3/26/2021 at 7:40 PM, Erlend-fs said:

Sorry, I think you misunderstood. 

I'm very happy with this page: https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau

It scales from 4 to 2 columns to 1 column (depending on screen with).

I would really like to do the same with this page: https://spinach-keyboard-w7ws.squarespace.com/fallsikringstjenester

But on this page, I would like to have a three column grid (instead of four columns), that scales down to 2 column and 1 column (depending on screen width.

 

Is this possible?

 

It looks like you solved this?

Also I see you haven't changed SEO Title on this page, so the browser tab name still shows "Services 1"

https://spinach-keyboard-w7ws.squarespace.com/fallsikringskurs

Thanks for your reply tuanphan, and thanks for your tips about the SEO headings.

I have updated them now👍

Unfortunately, I haven't found a solution to the image grid.

This is a link to the site, where I have arrange the images as I would like them to be (three columns on desktop, two columns on tablet, one column on mobile).

As you can see, there is a bug when they scales into two columns (see screenshot below)

On 4/6/2021 at 1:12 PM, Erlend-fs said:

Thanks for your reply tuanphan, and thanks for your tips about the SEO headings.

I have updated them now👍

 

Unfortunately, I haven't found a solution to the image grid.

This is a link to the site, where I have arrange the images as I would like them to be (three columns on desktop, two columns on tablet, one column on mobile).

As you can see, there is a bug when they scales into two columns (see screenshot below)

Hi. Dont edit your code.

Add this code to handle last images

/* Tablet 2 columns */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-6054b454e167cd02975ecfd6 .span-12>.row>.span-4:nth-child(3) {
    width: 100% !important;
    display: flex;
    flex-wrap: nowrap;
}
div#page-section-6054b454e167cd02975ecfd6 .span-12>.row>.span-4:nth-child(3) .image-block {
    width: 45%;
    padding-top: 0;
}
}

Than you tuanphan. This did work with some tweaking.

The only challenge now, is the order of the images.

The order stocks, when scaling from three->two columns, and from two-> one column.

I know how you snap (build) the page controls this, but when I do the snapping to make the order be right, the scaling does not work again..

https://spinach-keyboard-w7ws.squarespace.com/fallsikringstjenester

On 4/13/2021 at 2:07 PM, Erlend-fs said:

Than you tuanphan. This did work with some tweaking.

 

The only challenge now, is the order of the images.

The order stocks, when scaling from three->two columns, and from two-> one column.

I know how you snap (build) the page controls this, but when I do the snapping to make the order be right, the scaling does not work again..

https://spinach-keyboard-w7ws.squarespace.com/fallsikringstjenester

You mean, you want order from left to right?

not top to bottom like as current?

I mean that the order of the images are mixing up when scaling down from desktop to tablet and mobile. 

See attached images.

Ideally, the order would be 1,2,3,4,5,6

4 hours ago, Erlend-fs said:

I mean that the order of the images are mixing up when scaling down from desktop to tablet and mobile. 

See attached images.

Ideally, the order would be 1,2,3,4,5,6

Try adjust your layout a bit

First, add image 1, 2, 3

Next, add a Line Block

Next, add image 4,5,6

Next remove Line Block

Then check it again on mobile

This is close.

Things gets correct on desktop and mobile, but the layout won't break correctly into the two column layout.. Se attached image.

But I managed to find a solution that seems to work good.

https://spinach-keyboard-w7ws.squarespace.com/fallsikringstjenester

I built the page with the images beside each other in one row, and used the following code to make it break into three columns -> two columns -> one column.

/*FALLSIKRINGSTJENESTER - three columns below 2500px **********/
section[data-section-id="6077ccdd3d481051ff651d72"],
{
@media screen and (max-width: 2500px) {
  .span-12 .span-2 {
    width: 33% !important;
    float: left !important;
}
}

section[data-section-id="6077ccdd3d481051ff651d72"],
{
  .span-2 .sqs-block-content {
    width: 100% !important;
}
}
}
/*End- three columns below 2500px **********/

/*Bildemeny FALLSIKRINGSTJENESTER - Two column on tablet*/
section[data-section-id="6077ccdd3d481051ff651d72"],
{
@media screen and (max-width: 995px) {
  .span-12 .span-2 {
    width: 50% !important;
    float: left !important;
}
}

section[data-section-id="6077ccdd3d481051ff651d72"],
{
  .span-4 .sqs-block-content {
    width: 100% !important;
}
}
}
/* End- Bildemeny FALLSIKRINGSTJENESTER - Two column on tablet*/

/* FALLSIKRINGSTJENESTER*/section[data-section-id="6077ccdd3d481051ff651d72"],
{
@media screen and (max-width: 450px) {
.span-12 .span-2 {
    width: 100% !important;
    float: left !important;
}
}
  
/* FALLSIKRINGSTJENESTER*/section[data-section-id="6077ccdd3d481051ff651d72"],
{
  .span-4 .sqs-block-content {
    width: 100% !important;
}
}
}

/* End -------------- Bildemenyer - one column below 400px----------------*/