How do I edit my Shop/Store Category Header onto 2 or more lines.

Site URL: https://www.chrissiscauldron.com.au/shop/products

Hi all.
I'm new to all this... I've got my website built and working online... everything is pretty good so far. Shop is working well.
Trying to tweak a few things. One thing I'd like to try and do, and I can't work out for the life of me how to do it. How do I put the 'Shop/Store Category Header' onto 2 lines from the current default 1 line. It looks fine on a PC, but on mobile, you have to slide the header left/right to see the remaining product categories. Some people browsing my not realise it's a slider and won't see some of the other categories.
I'd attached a screenie of what it currently looks like, and a screenie of what I would like it to look like. I've created the 2nd in Photoshop to represent what I'm trying to do.
Any help in this matter would be appreciated.
Thanks in advance.

Try adding to Design > Custom CSS

@media screen and (min-width:992px) {
ul.nested-category-children li {
    width: 50%;
    justify-content: center;
}
ul.nested-category-children {
    max-width: 50%;
    margin: 0 auto;
}
}

On 3/13/2022 at 2:40 PM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (min-width:992px) {
ul.nested-category-children li {
    width: 50%;
    justify-content: center;
}
ul.nested-category-children {
    max-width: 50%;
    margin: 0 auto;
}
}

 

Hi.
Thank you for your reply.
I tried it and it works on PC, however on a Mobile it still looks as before... strange.
Kind regards.

On 3/16/2022 at 1:01 AM, Chrissi_Lynch-Whitton said:

Hi.
Thank you for your reply.
I tried it and it works on PC, however on a Mobile it still looks as before... strange.
Kind regards.

The code runs on desktop only. If you want it make on all devices, try this new code

ul.nested-category-children li {
    width: 50%;
    justify-content: center;
}
ul.nested-category-children {
    max-width: 50%;
    margin: 0 auto;
}