Tagged: table
Good day,
I have two questions. Link to my website is in the private field.
1) I added an Enfold Table element on my page and in one of the columns I added code to display an image using a basic img tag. The image shows great on desktop, but it does not show on mobile. Do you know how to make images in table cells show on mobile?
2) For the Enfold Table element, is there a way to make the width of each column shrink to match the width of the content in the cell? For example, in the first column of my table, I put a single number in each cell, like “1”, “2”, “3”, etc. The first column is wide and I want it to shrink in width automatically. I don’t want to manually set the size of the width, but have the width automatically shrink to match the cell’s content. Do you know what I mean?
Thank you!
Hey santanin,
Thank you for your patience, to make the cells width match the content try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
#top .avia-table.avia-data-table {
table-layout: auto;
}
The portrait images don’t show on mobile because they have no width like the flag images do, you can try this css that sets a min width for mobile and a max width for desktops, feel free to adjust to suit:
#top .avia-table.avia-data-table tbody td:nth-child(3) img {
min-width: 5em;
width: 20em;
}
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
Best regards,
Mike
Wow, both CSS codes work perfect. Thank you very much!
Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike