[Support request] How to Add Custom container

Home Forums Support [Support request] How to Add Custom container

Home Forums Support How to Add Custom container

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #689043
    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
    #689237
    David
    Staff
    Customer Support

    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;
    }
    #713860
    Kemo

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

    #714688
    David
    Staff
    Customer Support

    Glad you found it to be of help

    #794291
    johnzoro

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

    #794295
    David
    Staff
    Customer Support

    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.

    #797194
    johnzoro
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.