Archived topic

List Subcategory Code / CSS

5 replies · Started by Scott on January 12, 2023

Viewing posts 1–6 of 6

January 12, 2023 at 3:09 am #2492594

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!

January 12, 2023 at 7:42 am #2492831

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;
}

January 12, 2023 at 7:57 am #2493020

Much better - how can I center the entire container? tried the tricks I knew - none of which worked. THANKS!

January 12, 2023 at 9:17 am #2493144

Try adding justify-content: center; to this CSS:

.gb-container .list-subcats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

January 15, 2023 at 6:10 am #2496132

Perfect - thanks

January 15, 2023 at 6:50 am #2496154

You're welcome

This archived topic is closed to new replies.

Start building better websites today.