How to Add Custom container

Hi there,

nichpie are just adding an image. You could create a table but they are can be problematic with resposniveness. Or you could create a couple of lists and wrap them in some columns - like this:

HTML Markup:

<div class="comparison-table">
    <div class="comparison-column pro">
        <h4>Pros</h4>
        <ul>
            <li>Pro 1</li>
            <li>Pro 1</li>
            <li>Pro 1</li>
            <li>Pro 1</li>
        </ul>
    </div>
    <div class="comparison-column con">
        <h4>Cons</h4>
        <ul>
            <li>Con 1</li>
            <li>Con 1</li>
            <li>Con 1</li>
            <li>Con 1</li>
        </ul>
    </div>
</div>

CSS

.comparison-table {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 2%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid black;
}

.comparison-column {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 240px;
    flex: 1 0 240px;
}

.comparison-column.pro h4 {
    background-color: green;
}

.comparison-column.con h4 {
    background-color: red;
}

.comparison-column h4 {
    color: #fff;
    padding: 2%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.comparison-column ul {
    margin-left: 1em;
}

.comparison-column li {
    list-style-type: none;
    font-size: 0.8em;
}

.comparison-column.pro li:before {
    content: '\f00c';
    color: green;
    margin-right: 10px;
}

.comparison-column.con li:before {
    content: '\f00d';
    color: green;
    margin-right: 10px;
}

Your customer support is amazing. I'm using this on our site. thanks, David.

Glad you found it to be of help

when i use this it makes boxes where the bullet points would normally be. any idea why this is the case?

Hi there,

that code relies on fontawesome icons being loaded on the site. If you want us to look deeper can you raise a new topic, where you can share you URL. Please add a link to this topic for reference.

i've started a new topic on https://generatepress.com/forums/topic/pros-and-cons/