How to increase columns in mobile view for masonry gallery layout? make 3 column the same as tablet view. same for Projects in Portfolio pages

Hi, Ive tried the codes provided for the other requests but none seems to solve my need. I want the masonry layout to appear the same as default that is already set up but with one or two more columns. I want this change to be applied across all pages and gallery sections. It is exactly shown as i want when i check the "Desktop site" on my phone browser.

I also need a code to make the portfolio page show multiple projects in a row instead of only one. 

My URL: https://ahmadtaharetoucher.squarespace.com

i found a code if anyone is looking for the solution. 

 

Quote

@media only screen and (max-width: 640px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 3;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 0.0px!important;
        box-sizing: border-box;
    }

    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
          width: 100%!important;
    }
}

but now the images are randomly placed on the mobile , i cant seem to figure out how to organize them