Links table overflows on mobiles.

  • Resolved grahamclements

    (@grahamclements)


    3 years, 2 months ago

    Hi,

    I have tried everything, but I can’t stop the links table overflowing on small mobile screens, like the iphone5s, which is 320pxs wide. Is there anywhere in the code that sets a minimum width for the links table? I have gone into the stylesheet and set the width percentage to less than 100 (as little as 10%) and this does decrease the width on larger mobile phone screens (using chrome inspect), and on the iphone5s when I turn it on the side. But makes no difference to its size on the non-sideways screen. I notice that the percentage width doesn’t seem to go below 50% which still looks too wide to fit on a iphone53 screen. So is there a way to fix this. Or are there so few small screens these days that I should forget about the problem.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter grahamclements

    (@grahamclements)

    3 years, 2 months ago

    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.

    Plugin Author Yannick Lefebvre

    (@jackdewey)

    3 years, 2 months 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.

    Thread Starter grahamclements

    (@grahamclements)

    3 years, 2 months ago

    Hi Yannick,

    Floating divs would be a great for responsiveness on mobiles.

    Plugin Author Yannick Lefebvre

    (@jackdewey)

    3 years, 2 months ago

    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.

    Thread Starter grahamclements

    (@grahamclements)

    3 years, 2 months ago

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

    Plugin Author Yannick Lefebvre

    (@jackdewey)

    3 years, 2 months ago

    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.

    Plugin Author Yannick Lefebvre

    (@jackdewey)

    3 years, 1 month ago

    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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Links table overflows on mobiles.’ is closed to new replies.