How can I set background color of first column?

  • I want to have the entire left column in the grid below appear tan but since column 2 is taller than column 1, the tan background does not extend down far enough to match the height of column 2. Can anyone tell me how to get the height of the background color of column 1 to match column 2?

    [su_row]
    [su_column size=”1/5″ class=”tan-col-1″]
    Column 1 Text all one row
    [/su_column]
    [su_column size=”4/5″]
    Column 2 Text Line 1
    Column 2 Text Line 2
    Column 2 Text Line 3, etc.
    [/su_column]
    [/su_row]

    **CSS***
    .tan-col-1{
    background-color: #efebdc;
    }

Viewing 4 replies - 1 through 4 (of 4 total)

  • Add a class to your second column [su_column size=”4/5″ class=”tan-col-2″]

    Add the following to your CSS, changing the colours as you wish and you should be good to go ??

    .tan-col-1, .tan-col-1:before {
    width:20%;
}
.tan-col-1 {
    float:left;
    padding: 20px 30px;
    color: #6d7072;
}
.tan-col-1:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: 0;
    background: #efebdc;
}

.tan-col-2, .tan-col-2:before {
    width:80%;
}
.tan-col-2 {
    float:left;
    padding: 20px 30px;
    color: #ebeef3;
    font-size: 90%;
}
.tan-col-2:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: 20%;
    background-color: #5f6673;
}

    Bro, you can use
    min-height: 200;

    Thread Starter tjesker

    (@tjesker)

    thetasteofaussie – Thanks much for your help but I can’t get it to work. Using your CSS the tan background does not show unless I change z-index to 1 but then the text disappears. Any suggestions?

    Thread Starter tjesker

    (@tjesker)

    ozwds – Appreciate your reply. min-height would work if I could set it to be whatever the height of the block is in the second column of the same row. Any way I can do that?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How can I set background color of first column?’ is closed to new replies.