This CSS snippet is useful when preparing guides that utilize Visual Composer and a combination of text boxes and buttons. It is not uncommon for multiple listings in a single row to have varying paragraph length, which then results in misaligned buttons.
This video tutorial explains how to use the code provided to enhance the look of guides by adding class names to rows, text containers, and button containers.
The code on the right should first be copied into the gear icon at the top of a post when preparing with Visual Composer. This particular code will only apply to screens above 768 pixels wide, particularly desktop. Mobile screens and devices will revert to a single column, so the formatting is not necessary then.
Class Names
special – for the row that has the containers with elements that needed formatting
button-container – for the each box within that row that has the social buttons
content-container – for the text boxes within that row that has the formatting
These must be added in to the “class” field that’s right above the “save changes” button in each of those elements. Class names are arbitrary and can be changed, but the key is to be consistent in adding the class to every element that needs the formatting
[/vc_column_text][/vc_column][/vc_row]