Need help so set columns of categories

Looks like you only show categories with the results (linklist), not showing categories with [ link-library-cats ] shortcode.

You could use css columns:

.linklist {
     -webkit-column-count: 3; /* Chrome, Safari, Opera */
     -moz-column-count: 3; /* Firefox */
     column-count: 3;
}

Alternatively you could set the divs to 33% wide and float left. Or do what the raamdev site does (3 divs each with a seperate library).

Hi,
So you are saying me to use [ link-library-cats ] shortcode instead of that I’m currently using? (Shown in the screenshots)

Also would love to add those 3 extra div like raamdev did but I’ve no idea how to add those divs into this plugins output in the first place. Can you help brother? May be send me a screenshot showing how to add those divs? Please.

No, I’m only saying that the “number of columns” in category settings apply to the rendering of that shortcode.

Don’t put the divs in the plugin output, put the plugin output in the divs. If you had compared the raamdev page with your own you would have seen a setup like this was used:

<div style="width: 30%; float: left;">
[link-library settings=2]
</div>
<div style="width: 30%; padding-left:20px; float: left;">
[link-library settings=3]
</div>
<div style="width: 30%; padding-left:20px; float: left;">
[link-library settings=1]
</div>

So, put that in your page, then setup each library to display only a couple of categories. I think you can use “categories to be displayed” in the common tab.

Hi there,
so just to be clear you want me to use shortcodes like [link-library settings=2] instead of [ link-library-cats ] right?

Also how do I create these shortcodes like [link-library settings=2]? How do I decide which category will go under which settings. Is there no way to automatically arrange the categories in the 3 column design based on window width? If I explicitly which category will be under which side, it might look on on my screen, but it would look very odd on bigger screen like smart TVs or small devices like smartphones.

I was hoping is there is any automated responsive way to do this. Like I say 3 column and based of the width of the viewpoint it decides which category will where.

Also if there is no such way to do it, please show me how do I create the shortcodes like this: [link-library settings=2]

Thanks a ton for all of your helps brother. Really thanks a lot.

you want me to use shortcodes like [link-library settings=2] instead of [ link-library-cats ]

Yes, I think that’s what you are already doing. Or am I wrong?

Also how do I create these shortcodes like [link-library settings=2]?

In link library general options set number of libraries to 3. Then in the library settings these will become available. Goto library 2 and copy FROM library 1 to transfer settings. Repeat for library 3. Then for each library set up the categories to show.

How do I decide which category will go under which settings.

I’d say alphabetical order and try to distribute the cats equally.

Is there no way to automatically arrange the categories in the 3 column design based on window width?

Keep your current structure and use css columns as in my first answer. Then you can simply use 1 library like you have now, but I think you cannot control how the elements wrap.

If I explicitly which category will be under which side, it might look on on my screen, but it would look very odd on bigger screen like smart TVs or small devices like smartphones.

Use media queries to set the width of .LinkLibraryCat. You can also float them, lower css columns, etc.

For the more advanced positioning you’d probably need a masonry plugin or something like isotope.

Thanks brother for your reply. Thats what I’m currently doing. Check my link again given in the first post, you will see the changes ??

Thanks a ton for all of your helps ??

Just tried the isotope. I think it is better to use media query in this case rather than isotope.

Hey brother please take a look now. I have applies the media query. I’m changing the design from 726px. Do you think it is looking ok? or should I make it change from something like 640px? What do you think?

Yeah that’s it. Like the raamdev setup. You could consider using a breakpoint to set the columns to full width. Or 50%, but then you’d need to split up the middle column, or use css columns.

Cheers.

Hi brother I already did that. Thats what I said earlier. Currently I set the breakpoint at 726px. When you go 726px or lower it become 100%. Check it out.

I asked you if you think I should reduce the breakpoint from 726px to something like 640px or what I have is ok?

Sorry missed that. Anyway, this looks fine… 640px is probably too narrow. Many devs would use 768px as a breakpoint, and also increase font-size below that width.

Thanks for the reply. I’ve changed the break point to 768px. I think the font size looks ok. If I increase it at <=768 it is looking a bit odd. What font size you have tried at <= 768px?

I think the fonts look ok at around 125-130% < 768px

Thanks buddy for the insight. One last question. Is there a way to turn of that in-build stylesheet feature? I like my style sheet to be in style.css instead of at a plugin level.

You’re welcome.

Re the css option I may be confused with another plugin, as I thought there was an option to turn it off, but can’t find it. You could still clear the stylesheet.

Perhaps plugin author can chime in…