how to stack product blocks on home page in rows of two on mobile site

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

Im wondering if there is anyway that I would be able to stack product blocks on my home page in rows of two instead of one on top of the other on mobile. Im also having a problem with my grid masonry being centered in mobile view. I put in some code to get it to stack on top of each other but it seems it may have caused it to be slightly off center. Any help is greatly appreciated.  My cite password is Millydog!8

15 hours ago, jjstapp2323 said:

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

Im wondering if there is anyway that I would be able to stack product blocks on my home page in rows of two instead of one on top of the other on mobile. Im also having a problem with my grid masonry being centered in mobile view. I put in some code to get it to stack on top of each other but it seems it may have caused it to be slightly off center. Any help is greatly appreciated.  My cite password is Millydog!8

Is it what you mean with the masonry gallery?

9 hours ago, bangank36 said:

Is it what you mean with the masonry gallery?

I figured out the grid masonry! But do you think you help me stack the product blocks in rows of two on the home page? The four blocks under favorites! Thanks!!

@jjstapp2323 Add to Design > Custom CSS

/* Mobile Homepage Products */
@media screen and (max-width:767px) {
div#page-section-615f7298b3658e4fa2ac9fd6 .span-3 {
    width: 50% !important;
    float: left !important;
}

div#page-section-615f7298b3658e4fa2ac9fd6 .span-3:nth-child(2n+1) {
    clear: left;
}
}

45 minutes ago, tuanphan said:

@jjstapp2323 Add to Design > Custom CSS

/* Mobile Homepage Products */
@media screen and (max-width:767px) {
div#page-section-615f7298b3658e4fa2ac9fd6 .span-3 {
    width: 50% !important;
    float: left !important;
}

div#page-section-615f7298b3658e4fa2ac9fd6 .span-3:nth-child(2n+1) {
    clear: left;
}
}

 

thank you that worked!!