Topic: How do I write a custom CSS style for making overflowing Quick Tags wrap?

Posted under General

I know that Quick Tags are supposed to be "quick" but I found myself accumulating a very long list of them which resulted in my discovery of the main issue: overflowing Quick Tags will continue creating new columns to the right, effectively invaliding every tag that fails to stay within the bounds of the Related Tags block, instead of breaking into a new row or something like that.

Now I have created a very rudimentary solution based on my three hours of CSS style research, but I would like to find a more elegant way to solve my issue. Could someone more experienced in CSS help me?

My temporary fix which simply allows me to horizontally scroll through all my Quick Tags:

.related-tags.flex-wrap {
overflow: scroll;
}

It lets me access my full list of tags but its quite tedious to have to scroll through this every time.

Here's my botch job

/*slightly larger quick/related/whatever tag buttons*/
.related-item {  transform: scaleY(1.1); margin-top: 0.132em;  }
.related-item {  transform: scaleX(0.87);  margin-left: -1.6em;  }

snpthecat said:
Here's my botch job

/*slightly larger quick/related/whatever tag buttons*/
.related-item {  transform: scaleY(1.1); margin-top: 0.132em;  }
.related-item {  transform: scaleX(0.87);  margin-left: -1.6em;  }

This allows for more quick tags to squeeze into the bounds of the Related Tags block but it doesn't help with the overflowing issue (I have way too many quick tags). I appreciate the help though.

I kinda wish there was a way to have multiple, like, loadouts for quick tags that you could toggle between.