Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #705388

    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

    #705987

    Hey lzevon,

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

    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

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