tablet view - scaling problem

Site URL: https://spinach-keyboard-w7ws.squarespace.com/fasadevedlikehold-8

Hello!

I've created a page with four content blocks beside each other.

On desktop, everything looks good.

But if I scale the page down (tablet view etc), everything gets out of grid.

If I scale even more down (mobile view), the four blocks appears under each other (quite nice).

I have two questions:

1:  is there a way to get the grid look good in tablet view? I know I can create a new section under the text, and insert the images there (but I want the images to appear under each text block on mobile view, like it is now).

2: Is there a way to get the grid to transfer into a two column layout on tablet view?

    - it would be great with this setup:

             - four columns on desktop (accomplished)

             - two columns on tablet

             - one column on mobile (accomplished)

Thanks in advance!

https://spinach-keyboard-w7ws.squarespace.com/fasadevedlikehold-8

pw: hoyden2021

Add to Design > Custom CSS

/* Tablet 2 columns */
@media screen and (max-width:767px) {
div#page-section-601800fecf4b097cfcc34ce4 .span-12 .span-3 {
    width: 50%;
}
}

Hello again tuanphan.

I've moved away from this design on this page, but I have a similar issue on another page which I have posted a question for here:

19 hours ago, Erlend-fs said:

Hello again tuanphan.

 

I've moved away from this design on this page, but I have a similar issue on another page which I have posted a question for here:

 

 

The link doesn't exist.