- This topic has 7 replies, 2 voices, and was last updated 12 months ago by
David.
-
AuthorPosts
-
April 13, 2020 at 11:34 pm #1238142
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.
April 14, 2020 at 3:16 am #1238349David
StaffCustomer SupportHi 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/April 14, 2020 at 7:17 am #1238579prakshah
thanks
April 14, 2020 at 7:24 am #1238595David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 14, 2020 at 7:29 am #1238601prakshah
One last query. Can you guys also help (as a paid service) in developing a table format I am looking?
April 14, 2020 at 8:07 am #1238807David
StaffCustomer SupportCan you show us an example of what you’re after ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 14, 2020 at 8:09 am #1238816prakshah
Sure, how can I send it to you privately?
April 14, 2020 at 8:10 am #1238818David
StaffCustomer SupportIf 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/ -
AuthorPosts
- You must be logged in to reply to this topic.