Hello everyone,
I’m currently working on a project and have a little problem I can’t fix: As you can see in the Screenshot here…
However, I’m struggling to achieve this because I can’t do it with this mix of button categories.
It would be nice if someone could help me, thank you very much! 
Best Regards
Jan
I now placed the buttons like this, but I still can’t find a way to put this non-cms button in the right order… I could really use your help - Thanks!
Put them inside a DIV, set the DIV to flex, enable wrap, set the width of the buttons to 50%. Use some padding to make them not touch.
Hey, thanks for the reply! But it seems like it does not work or I did it wrong. I can’t get the one CMS Button (that expands to 5 buttons because of 5 elements) and the one non cms-button in the same div… Could you please explain it a litte more detailled - thanks! 
My bad, I thought the last one was just moved inside the collection list.
Here’s one way of doing it:
Add a DIV and put the one “extra” button inside it
Copy the collection list and put the copy inside the DIV too, copy the item element class (‘filter’) so it’s not the same as the original list.
Set the DIV to flex, horizontal, 100% width, set the new collection list to 50% width, set the extra button to 50% width and expand if possible. Add in 5px margin on both sides.
Select the new collection list and limit it to one item, starting at 1.
Select the “old” collection list and limit it to whatever you want and start at 2.
Style the old collection list so it’s the same as the two over (collection element at 100%, list element at 100%, items at 50%.
Thanks for this awesome idea! Great Workaround! But I’m afraid I have to ask you one more question… Sorry
I tried to rebuild it and it also works, but when i try to style it (5px margin each side f. ex.) it get’s kind of messed up… Did I do something different then you?
Set the “Alle Beiträge” button to grow if possible:
Then give the buttons 5px margin on the left and right.
Thank you really much! And thanks for taking the time and helping me, pretty awesome… Now I have one problem less to fix
Hey @Fonsume , I have another problem that I’ve been stuck on for a while, I’d write it to you briefly here, but if you don’t have the time/feel like it anymore, it’s all good, you’ve already helped me enough, then just ignore it. I just thought I’d write it quickly, maybe the solution is quite simple for you…
For all pages I have built the structure so, that when moving the browser window at least a MinHeight is preserved and the content does not overlap. In some sections, like this one (see screenshot), I just can’t get it right.
If you see my mistake on the fast, I would be pleased of course - But as I said, I do not want to “exploit” you here… Thanks!
No problem!
It seems like things are overlapping because you’re setting elements to use the entire height. You’re using 100vh as minimum height or height on the “container default” div, the “flex” div and the “styleguide sidebar” div.
VH (and VW) will be recalculated based on browser height and width, and insisting on having an element use 100 (percent) view height will sometimes break things since the element will be as tiny as the height and the contents within the div will still be the same size.
I don’t have a quick fix here, but you could try setting fixed heights in pixels for the elements and tweak the contents a bit, but that might disrupt the “full page” setup you’ve got going. Or maybe try to scale the insides of those divs.
Oh yeah you’re right, totally forgot about that.
Thanks, I will give it a try and try to work with fix “px”.
