Archived topic
Modification Help for Table
7 replies · Started by Praveen on April 13, 2020
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.
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%;
}thanks
You're welcome
One last query. Can you guys also help (as a paid service) in developing a table format I am looking?
Can you show us an example of what you're after ?
Sure, how can I send it to you privately?
If its a URL - edit your Original Topic and use the Site URL field to share it privately.
