Help with Mobile Formatting

Site URL: https://lily-yellow-zwzc.squarespace.com/

Hi there,

I added the following custom code to my site so that my product category menu still shows up when you click on a specific category, if that makes sense. Here is the code:

/* Show category nav links */
div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 50% !important;
    max-width: 50    % !important;
    margin-right: 0 !important;
}
section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
}
.nested-category-tree-wrapper>ul {
    width: 100% !important;
    display: flex;
    justify-content: left;
    align-items: left;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}

The problem is that on the mobile version of my site the formatting looks all messed up and you cant see all of the categories. 

The password to my site is bathtub

Thanks in advance for your help,

Virginia

Hi,

What should it look like on mobile? It looks fine to me