Alloy categories in Foundry 3

I am trying to rebuild my website in Foundry 3. So I am a beginner - when it comes to the latest version of Foundry.

My problem:
I have rebuilt the blog site. However the tags by the categories are too close together on small screens (see picture). How can I increase the line spacing?

Thanks for the support.
Happy easter!

You could try something like div.com_elixir_stacks_alloyCategories_stack .inline-cat-parent { padding-bottom: 2px }, but that’ll also put a tiny bit of space under the last line and I’m not sure how to prevent that.
Maybe someone smarter than me, like @elixirgraphics can solve that part. :rofl:

Thanks @forbesrodney for your suggestion.
I didn’t have the problem under Foundry 2 - as you can see in the picture.

Hope @elixirgraphics has another solution.

Hi there @Tzatziki –

The solution that @forbesrodney gave above should work.

Additionally if you want you could add Blacksmith to the page and make a stylesheet to adjust this spacing as well. When you make your Blacksmith stylesheet use the class name inline-cat-parent and then add padding to the bottom using the padding settings.

Do you have any thought on how to get rid of the spacing under the last line that my solution would add?

That’s not a possibility.

I couldn’t think of a way, but I still consider myself an amateur at CSS.

1 Like

Yeah, you could do it if you knew exactly how many would be on the bottom “row” but since we’re working in a responsive environment that isn’t something you’re going to know really. So instead it is better to simply incorporate that spacing into the overall design.

Good morning @forbesrodney and @elixirgraphics

Thank you very much for the support.
Now it works wonderfully!

I am happy with Foundry 3.
There is so much to discover…

Have a sunny weekend.

I wonder if using the :last-child pseudo class would work in this case. I do not use Alloy currently, so I have no opportunity to try.

I’m pretty sure :last-child and such is what Adam was eluding to with his comment about not knowing how many would be on the bottom row.

Yes, exactly. :last-child only affects the last item in the list. The others on the wrapped row will still have a padding-bottom applied. Same goes with nth-child(). You could affect a certain set of items, removing their padding, but you don’t know ever how many will be on the last “row” of the list.