Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • October 28, 2016 at 7:05 pm #705388
    lzevon

    I have a layout that uses 1/4 – 1/2 – 1/4 and I would like to have the layout work as follows…

    Col 1 (1/4) – 20%
    Col 2 (1/2) – 50%
    Col 3 (1/4) – 30%

    So despite having two 1/4 columns, I actually want the first 1/4 column to be a little narrower, with the hopes of using the space I saved in the last 1/4 column, which I’d like to have wider. Is this possible? I am trying to figure out how to target first and last columns in the CSS.

    Thank you

    October 31, 2016 at 7:53 am #705987
    Vinay

    Hey lzevon,

    1. Enable custom css class name support to target specific builder elements using css.

    Turn on Custom CSS Class field for all ALB Elements

    2. Use the following

    Col 1 (1/5) – 20% add class twentyp
    Col 2 (1/2) – 50% add class fiftyp
    Col 3 (1/4) – 30% add class thirtyp

    Add some text in the grids to view the result.

    3. Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    Adjust the margin and width value to suit your design. You can remove the background color it is used in the code for reference purpose only.

    /* Add your own styles here: */

.thirtyp{
width: 30%!important;
background: gold;
margin:0!important;
}
.twentyp {
width: 20%!important;
background: red;
margin:0!important;
}
.fiftyp{
width: 50%!important;
background: black;
margin:0!important;
}

    Best regards,
    Vinay

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘varying the width of two 1/4 columns’ is closed to new replies.