Can you please help me display two columns on the mobile site?

Site URL: https://www.hemastyles.com/

I've tried all the codes available online but can't seem to get it to work. I want my products or the earrings page on mobile site to display two columns of products instead of being stacked. Thank you. 

Have you tried this code? It works perfectly when I've used it.

https://www.rebeccagracedesigns.com/blog/products-side-by-side-mobile

/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
}
}

You may want to adjust your font sizes once applying this.

Just tried above code & it doesn't work.

You can try this code

/* products mobile 2 columns */
@media screen and (max-width:767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px;
}
.list-grid .grid-item .sqs-add-to-cart-button {
    width: auto !important;
    min-width: unset !important;
}
}