Jump to content

Split index page in 3 columns in Brine template

Recommended Posts

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

Screenshot 2020-08-11 at 13.36.09.png

Link to comment
  • Replies 2
  • Views 362
  • Created
  • Last Reply
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

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.