Archived topic
.widget_categories css
3 replies · Started by Anil on February 6, 2022
Viewing posts 1–4 of 4
Hi
I want .widget_categories li should be approx. 50% and nicely fit 2 categories in one row.
Using below css, if you suggest flexbox alternative for it:
.widget_categories li{
border-radius: 4px;
min-width: 35%;
line-height: 1.8em;
padding: 5px 15px;
box-sizing: border-box;
display: inline-block;
text-align: center;
margin: 4px 4px 4px 0;
border: 1px solid #ccc;
}
.widget_categories li:hover{
background-color:#f1f1f1;
}
.widget_categories li.current-cat{
background-color:#f1f1f1;
font-weight:600;
}
.widget_categories ul{
clear:both;
}
Regards.
Hi Anil,
Can you try this modification of CSS you shared?:
.widget_categories > ul {
display:flex;
flex-wrap:wrap;
}
.widget_categories > ul > li {
width: calc(50% - .4em);
margin: .2em;
box-sizing:border-box;
border-radius: 4px;
line-height: 1.8em;
padding: 5px 15px;
text-align: center;
margin: 4px 4px 4px 0;
border: 1px solid #ccc;
}
.widget_categories li:hover{
background-color:#f1f1f1;
}
.widget_categories li.current-cat{
background-color:#f1f1f1;
font-weight:600;
}Kindly modify the spacing values to your preferred spacing.
Let us know if this works! Hope to hear from you soon! :)
Thankyou very much Fernando. It is working fine.
Warm regards.
Glad that worked! Feel free to reach out anytime if any help is needed! Warm regards. :)
This archived topic is closed to new replies.
