Indeed, these instructions are a bit old. Instead of resetting to table layout, you can use the reset current librart button, then go to the Presets tab and select Layout 3. From there, you should be able to follow instructions as before.
Thank you for such a prompt response!
That worked well, though I used Layout 5. Any thoughts on making the column widths balance, though? See the ISRO entry at the bottom here for an example of what I mean:
https://steam-space.org/staging/2422/
One other note: Multiple columns don’t do well on mobile:
https://steam-space.org/staging/2422/
I am not sure what you want me to look at on this page. What is the ISRO entry?
Indeed, tables don’t typically fare well in mobile browsers. If you can find an example of a div-based layout that works well in mobile and has the look you are looking for, I can help figure out how to implement it in Link Library.
Ack! My bad. I intended to post this link:
https://steam-space.org/staging/2422/resources/
ISRO is the first item that appears as a second column, under the ‘Organizations’ category.
I’ll look around for examples that perform well on mobile.
I’ve mocked up one using Gutenberg’s ‘Table’ block, which evenly distributes the td elements, and looks marginally ok on mobile. There’s a lot of styling to do yet, but it’s a start:
https://steam-space.org/staging/2422/table-test/
Ideally, I’d like them to stack on mobile. I mocked that up using Gutenberg’s 2-equal-columns ‘Column’ blocks combined with Gutenberg’s ‘Media & Text’ blocks. Again, there’s still some styling to do, but the layout works well for desktop and for mobile by stacking elements on the latter:
https://steam-space.org/staging/2422/column-test/
Cheers!
With the table layout, you could set better width for each of the columns. For the TD in front of the image, set the tag to:
<td style="width:15%">
and for the td before the text, set the tag to:
<td style="width:35%">
This will make the logo columns shorter and the text columns larger. Here is what that would look like on desktop: https://imgur.com/a/apqIJfh
To fix the mobile display, you could add a CSS rule that will display all table rows one under the other. This could be done by adding the following to the stylesheet section of Link Library:
@media screen and (max-width: 400px) {
table.linklisttable td {
display: block;
}
}
This would make the page display like this: https://imgur.com/a/bERGkBc
Let me know if you need any further help to get this layout working on your site and please consider donating to support this plugin’s development.
