Split index page in 3 columns in Brine template

Site URL: https://hugseat.squarespace.com/

Hi guys,

I am trying to split my Index Page in Brine in 3 identical text columns, each customizable with its own text.

I got it to split in three, using CSS (see code below).

However, it doesn't scale properly on various screen sizes.

For now, it seems to work on desktop screens from 13" upwards. However, smaller than that, it doesn't scale and creates white space under some of the blocks (see print screen).

Also, on tablet view it becomes a big mess.

Is there anything I can do to make it more responsive?

It would be great if I can force the text blocks to appear underneath each other on tablet view, instead of next to each other as on desktop.

Any suggestions?

//**CODE USED**//

#hm-5 .Index-page-content {
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px}

#hm-5 p {color: #ffffff;
font-size: 15px}
#hm-5 h1 {color: #ffffff;
text-decoration: overline}
#hm-5 h2 {color: #ffffff;
font-size: 23px;
font-weight: 300}

#block-5f16cf2432edb9779e1644a6 {
  background: #CFA913;
  padding-left: 80px;
  padding-right: 80px;
padding-top: 50px;
  padding-bottom: 100px;
}

#block-yui_3_17_2_1_1595330356097_4472 {
  background: #4b4d54;
  padding-left: 80px;
  padding-right: 80px;
padding-top: 50px;
  padding-bottom: 100px;
}

#block-yui_3_17_2_1_1595330356097_5424 {
  background: #B5B4B1;
  padding-left: 80px;
  padding-right: 80px;
padding-top: 50px;
padding-bottom: 100px;}

Hi. Have you fixed this yet?
if not, can you share link to page in screenshot & access password?

On 8/17/2020 at 10:08 AM, tuanphan said:

Hi. Have you fixed this yet?
if not, can you share link to page in screenshot & access password?

Hi @tuanphan

Here you have the link to the website: https://www.hugseat.io/

The website is already live, so no password needed.

Would be awesome if you could help out.

What I think we need is a solution in which we can adjust the height of the three blocks regardless of the text inside these blocks.
Because that's where the problem lies. On some screens, in the middle column, the last word jumps to the next line, which causes the middle block to misalign.

Thanks!

Boudy