- This topic has 5 replies, 2 voices, and was last updated 3 years, 2 months ago by
.
-
Posts
-
Hello! i implemented the code here (https://generatepress.com/forums/topic/show-list-sub-category-in-category-page/) to show sub categories on my category page. Used this CSS to style as buttons:
.gb-container .list-subcats {list-style:none; display:flex;justify-content:space-around} .gb-container .list-subcats li a {color:#607e26;background-color:#fffcec;padding:10px 25px; border:1px #71942c solid; border-radius:25px;} @media (max-width:800px) {.gb-container .list-subcats {flex-direction:column;text-align:center;}} @media (max-width:800px) {.gb-container .list-subcats li{flex-direction:column;text-align:center;margin:15px 20px}}Is there a way to limit the number of flex columns? Buttons are getting split in two on the category pages with more than four subcategories. I want to limit it to 4 per line (4 columns per line on desktop)?
Link and example photo below.THANKS!
Customer Support
Hi there,
look for this CSS:
.gb-container .list-subcats { list-style: none; display: flex; justify-content: space-around; }and replace it with:
.gb-container .list-subcats { list-style: none; display: flex; flex-wrap: wrap; }This will make flex wrap so it creates extra rows when it runs out of space.
Then add this CSS if to put some space between them:
.gb-container .list-subcats li { display: block; margin: 20px 5px; }Much better – how can I center the entire container? tried the tricks I knew – none of which worked. THANKS!
Try adding
justify-content: center;to this CSS:.gb-container .list-subcats { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }Perfect – thanks
You’re welcome
- You must be logged in to reply to this topic.
