Links table overflows on mobiles.

I changed the size of the text for smaller mobiles screens
@media only screen and (max-width: 400px){table.linklisttable {
font-size: 0.8em;}
and that seems to have fixed the problem, wish I had thought of it hours ago.

Making the font size smaller is definitely one approach. Another approach would be to change data from being displayed as a table to a series of floating divs, making it much more responsive. I don’t have an example of displaying links as divs at the moment in the preset section, but I plan to add one.

Hi Yannick,

Floating divs would be a great for responsiveness on mobiles.

While there’s no sample, there is nothing stopping you from creating a div-based table with the plugin as it stands today. You can modify all of the HTML tags that the plugin outputs in the Advanced tab of library configurations. Of course, you would need to know a bit of CSS to make the divs floating and size them as desired, but all tools needed are there.

I’ll try to create a div-based preset this week-end.

I would love to give it a go, but too busy at the moment. I still have other problems with the website to solve.

I just put together a div-based table. You can import my library settings using this file: https://gist.githubusercontent.com/ylefebvre/3229abd34fcd2d4d795c15dbde077172/raw/d746e27da369714d58b8ea01e186f0d6a0df472b/SettingSet1Export.csv

I also added some styling elements at the end of the Link Library stylesheet editor:

.LinkLibraryCat {
	clear: both;
  width: 100%;         
  border-spacing: 5px;
}

.tablerow {
  width: auto;
  clear: both;
}

.tablecell {
  float: left;
  width: 400px; 
	height: 300px;
	padding:20px;
	margin: 5px;
	border: 2px solid #000;
}

Of course, dimensions may need to be edited to get something that looks good on your side. I will work on adding a preset based on this work, but this should help get there quicker.

There is now a new preset in Link Library that will create this div-based table layout. In addition to apply the preset, you’ll need to reset the stylesheet to get the newly-defined styles.