Quick Tip: Faux Nested Columns

I struggled with a title for this article, so if something else makes sense, let me know.

One of my pet peeves with Avada is the inability to put columns inside of columns, inside of columns — nested nested columns if you will. While I have not found the solution for this, one of the main reasons I use nested columns is to put an entire row of content inside a stylized column — you know, a border-radius, background color, box-shadow, etc. — like the following example.

What you notice in this image is that there appears to be a single column, with nested 2/5 + 3/5 columns, and in the 3/5 column, a series of 1/5 columns. When I initially built this, the white background was impossible because unless I create the nested columns and save them in the library as a global element, there wasn’t an immediate way to do this. I was wrong. Answering a question on the Facebook group gave me the solution by thinking about what I wanted — putting an entire row of content inside a stylized column. In a recent article, I had been exploring the variety of extra wrappers that exist in Avada, and I realized that the row wrapper was the key. Just because there are no controls, custom CSS is there to help.

So without further ado … the CSS I used to achieve the column look in the image above

.boxed-in > .fusion-builder-row {
  background-color:#fff;
  border-radius:8px;
  padding:32px!important;
  box-shadow:0 10px 20px -10px rgba(0,0,0,.3);
}

Things of note are:

• add the boxed-in class to the container
• In Live editing, this is not visible. If you want to see it in Live editing, you have to use .boxed-in .fusion-builder-row:first-of type, but you will have to change it back to work correctly
• !important is needed to override the default padding
• depending on your design, you may need to create a media query for this to change padding values or other options

Bonus CSS

In the image, there is a vertical divider between the 2/5 and 3/5 columns. Avada does not have this built-in, and the border settings do not have responsive values, nor do borders apply to the outside wrapper. To overcome this shortcoming, I have a small CSS snippet that I use. The breakpoint may need to be adjusted based on your needs.

  @media only screen and (min-width: 1024px) {
    .border--left{
    border-left:1px solid #e6e6e6;
    }}

I put together a quick demo.