Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 5, 2015 at 11:23 pm #406746
    IQONOMY

    Hi there, I am using the grid rows to achieve sort of a “tile style”. What I do in a child is extra css for eg. one row:

    .home-box-blue {
	background: -webkit-radial-gradient(circle, #176991, #053d60);
	background-position: center center;
	height: 320px;
	padding: 20px;
}

    With a 2/3+1/3 row i can place the boxes right beside, but don’t find a way to have som spacing (with the page/section background shining through) between the items. Is there a way?
    Thanks guys!

    March 6, 2015 at 6:35 pm #407179
    Elliott

    Hi IQONOMY!

    If you need some spacing between them then consider using columns instead and nest them inside a color section. You can give the color section an ID and target them like so.

    #yourID .flex_column { 
background: -webkit-radial-gradient(circle, #176991, #053d60);
	background-position: center center;
}

    Cheers!
    Elliott

    March 6, 2015 at 7:56 pm #407251
    IQONOMY

    Hi Elliott,

    but if I would need a more complex layout like 2/3 with 1st row full, 2nd row 1/2 + 1/2, and the second 1/3 with full width headline and two columns below e.g., this only would work with a grid, right?

    Any chance to nest a div into a grid row before multiple columns?

    Thanks a lot!
    —
    Moritz

    March 9, 2015 at 1:37 am #407802
    Ismael

    Hey!

    If you don’t mind, please provide a screenshot of the design you’re after. It will help.

    Regards,
    Ismael

    March 10, 2015 at 12:33 pm #408765
    IQONOMY
    This reply has been marked as private.
    March 11, 2015 at 6:45 am #409686
    Ismael

    Hey!

    You can try to do it with the grid layout. Note that you will have issues with cell height control specially when each cells have different content. First, you need to enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    We’ll try to do the first row, add a grid layout element, set the cell size to 2/3 – 1/3. Apply a unique id attribute in the For Developers: Section ID field. Use “custom-grid” for example. Apply the background in the Quick CSS field:

    #custom-grid {
	background: -webkit-radial-gradient(circle, #176991, #053d60);
	background-position: center center;
}

    Edit the 2/3 cell. Set the padding to 0px then add a custom css class. Use “flex-cell-1” for example. Add this to the Quick CSS field to add a custom cell background:

    #custom-grid .flex-cell-1 .flex_cell_inner {
	background: red !important;
}

    Edit the second cell(1/3), do the same but on the custom css class, use “flex-cell-2”. Add this to the Quick CSS field:

    #custom-grid .flex-cell-2 .flex_cell_inner {
	background: green !important;
}

    Add this code to create gaps between the cells:

    #custom-grid .flex_cell {
padding: 5px;
}

#custom-grid .flex_cell_inner
padding: 5px 15px;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.