search

gbif / hp-colombian-biodiversity

https://biodiversidad.co
5 stars 13 forks source link

Problems with the visivilization of images inside a table #10

Closed EstebanMH-SiB closed 3 years ago

EstebanMH-SiB commented 3 years ago

We have encounter some problems when we put an image inside a table. In this example all the images have the same size, but the table change the display based on the length of the text, I guess.

We should like to know if there is an easy way of choose the size of the cells inside a table, that way we can use the space in a better way.

image https://hp-colombian-biodiversity.gbif-staging.org/acercade/SiB_Colombia

Also we should like to know if you have a recomendation for other ways to display "structured information" besides a table, with the overflow in mobile the long tables get loss, but we do not have a better idea for present it.

image https://hp-colombian-biodiversity.gbif-staging.org/comunidad/ActividadPublicacion

Thanks as always! @MortenHofft

MortenHofft commented 3 years ago

https://hp-theme.gbif-staging.org/styling#add-custom-css

Add a bit of custom css. By adding a klass property to your frontmatter on that page you can ensure that the styling only applies to a specific page.

.actividad table img {
    width: 40px;
}
MortenHofft commented 3 years ago

See also http://hp-theme.gbif-staging.org/markdown#table-overflow and https://github.com/gettalong/kramdown/issues/69

MortenHofft commented 3 years ago

As for other ways to display structured data. There is always lists. And you can also use the feature cards (similar to news)?

EstebanMH-SiB commented 3 years ago

Thanks! I will try to do it next week with the resources you gave me

EstebanMH-SiB commented 3 years ago

I manage to did it, I created a new css klass for another table and now looks good enough. We will create new klasses if needed in the future.

Thank you for your help!