Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Split index page in 3 columns in Brine template


Scaleupmarketing

Question

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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

2 answers to this question

Recommended Posts

  • 0
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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...