Modification Help for Table

[prakshah]

Hi,

I have added the URL.

The main aspect of the table is –>

1) When it is seen in mobile, the two columns – image + the Key features – are neatly shown in single ROW, making it compact
2) I would also need the image to be of same height, even if a larger image is provided. I will be using AAWP plugin to get images from amazing API and they may be of different sizes.

I am not sure, if this requires the development of a NEW plugin or modification of a new one or Just using the CSS and code directly into the post.

Do let me know in case you have any queries.

Thanks a lot for considering.

[David]

Hi there,

just add additional comparision-column divs to your markup eg.

<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">
        <!-- Column 2 content here -->
    </div>
    <div class="comparison-column">
        <!-- Column 3 content here -->
    </div>
    <div class="comparison-column">
        <!-- Column 4 content here -->
    </div>
</div>

Then your CSS may need adjusting ie.:

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

The 240px is the optimum size for each of your columns. If you want them all to be equal try changing it to 25% for example:

.comparison-column {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 25%;
    flex: 1 0 25%;
}

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

[prakshah]

thanks

[David]

You’re welcome

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

[prakshah]

One last query. Can you guys also help (as a paid service) in developing a table format I am looking?

[David]

Can you show us an example of what you’re after ?

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

[prakshah]

Sure, how can I send it to you privately?

[David]

If its a URL – edit your Original Topic and use the Site URL field to share it privately.

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

[Author]

Posts