[Support request] How to Add Custom container

[Enamul]

http://nichepie.com/wp-content/uploads/2016/08/pros-and-cons.jpg

Hi,
I was trying to create a Pros and Cons into same row on my blog similar to Nichepie. How I do that?

GeneratePress 2.1.4

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kemo]

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

[David]

Glad you found it to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnzoro]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnzoro]

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

[Author]

Posts