Mobile: How to add columns in store?

Hello,

When you view my store in mobile, the items are in one column. Is there a way for me to make it two columns on mobile? (I would like to keep it 4 columns on desktop).

Site: https://www.dethreads.net

TIA!

Hm, that did not seem to work. Here is all the CSS I currently have including your suggestion:

.header-nav-item a:hover {
    font-weight: bold;
}

.nested-category-breadcrumb-link {
  font-weight: bold;
}
.category-link {
  font-weight: bold;
}

button.cart-row-edit::before {
  content:'Add Notes'
}
button.cart-row-edit span {
  display:none;
}
/* Fix mobile shifting */
@media screen and (max-width:700px) {
.header-title-nav-wrapper {
    max-width: 57% !important;
}
}
@media only screen and (max-width: 575px) {
    .products.collection-content-wrapper .nested-category-children {
        flex-wrap: wrap !important;
        overflow: visible !important;
    }
    .products.collection-content-wrapper .nested-category-breadcrumb-list-item .nested-category-breadcrumb-link {
        margin-left: 0 !important;
    }
}
@media only screen and (max-width: 767px) {
    .products.collection-content-wrapper .list-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

@cinnamoncat There's an error on the code you edited. You added "margin-center: 0 !important;". Change it to "margin-left: 1.5vw !important;"

Because of the error on your edited code, last block of code isn't working. 

hi @Lesum I changed it back to margin-left and still only one column

.header-nav-item a:hover {
    font-weight: bold;
}

.nested-category-breadcrumb-link {
  font-weight: bold;
}
.category-link {
  font-weight: bold;
}

button.cart-row-edit::before {
  content:'Add Notes'
}
button.cart-row-edit span {
  display:none;
}
/* Fix mobile shifting */
@media screen and (max-width:700px) {
.header-title-nav-wrapper {
    max-width: 57% !important;
}
}
/* show all categories */
@media only screen and (max-width: 575px) {
	.products.collection-content-wrapper .nested-category-children {
		flex-wrap: wrap !important;
		overflow: visible !important;
	}
	.products.collection-content-wrapper .nested-category-breadcrumb-list-item .nested-category-breadcrumb-link {
		margin-left: 1.5vw !important;
	}
}
@media only screen and (max-width: 767px) {
    .products.collection-content-wrapper .list-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

Nevermind, the two columns show on the actual mobile site, but does not update on squarespace emulator for some reason.

Thank you!!

Just now, cinnamoncat said:

Nevermind, the two columns show on the actual mobile site, but does not update on squarespace emulator for some reason.

Thank you!!

Great!

Yes, Squarespace Editor is having some technical issues for the last month or so. When you apply custom code, it doesn't show up immediately unless you reload the page. 

As a note to anyone wanting a 2-column grid on their mobile product page, this feature has been added to the store section settings. You can find it by editing the store section and toggling the mobile view: