Jump to content

Two column image grid

Recommended Posts

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:

1360091191_Screenshot2021-03-19at15_45.25(2).thumb.png.330bca4e41e3aba578f6888987b83882.png

 

This is how it displays on tablet:

1567616157_Screenshot2021-03-19at15_46_41.thumb.png.6b05cb486d9beb9fd6249c6e1c9a49e0.png

 

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):

1905070687_Screenshot2021-03-19at15_45_53.thumb.png.c3138cc5be1d2de47a56bfa8f96441ea.png

 

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):

353976041_Screenshot2021-03-19at15_45_42.thumb.png.deb342fd5ef73ad231908815be7ca3f6.png

 

Any suggestions to this one?

 

Link to comment
  • Replies 14
  • Views 3.1k
  • Created
  • Last Reply
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:

1360091191_Screenshot2021-03-19at15_45.25(2).thumb.png.330bca4e41e3aba578f6888987b83882.png

 

This is how it displays on tablet:

1567616157_Screenshot2021-03-19at15_46_41.thumb.png.6b05cb486d9beb9fd6249c6e1c9a49e0.png

 

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):

1905070687_Screenshot2021-03-19at15_45_53.thumb.png.c3138cc5be1d2de47a56bfa8f96441ea.png

 

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):

353976041_Screenshot2021-03-19at15_45_42.thumb.png.deb342fd5ef73ad231908815be7ca3f6.png

 

Any suggestions to this one?

 

Why dont you use gallery instead?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment

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!

Screenshot 2021-03-26 at 09.19.30.png

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

Screenshot 2021-03-26 at 09.19.30.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment

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?

 

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

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

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)

Screenshot 2021-04-06 at 08.10.41.png

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

image.thumb.png.69d5e349c83260298b2513d07aa46da7.png

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

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

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

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

Untitled-1-01.jpg

Untitled-1-02.jpg

Untitled-1-03.jpg

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

 

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

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----------------*/

Screenshot 2021-04-15 at 07.14.48.png

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.