Mobile Site Help PLEASEEEEE!!

Site URL: https://mackerel-collie-9dwr.squarespace.com/config/design/custom-css

1) So, my mobile site is driving me crazy and I need help please.  On my mobile site, the products are stacked vertically but I want them to be side by side. At least two columns. 

2) Whenever I click on the picture to zoom in, the picture is completely cut off(it's perfect on the desktop). 

3) There is no next button on the mobile site so customers can go back to the where they were before the current page they may be on. Help please

I'm so ready to send my password just for HELPPPP!!

@Lauri do you think you can send pictures of the problem? And send screen shots of something that can help resemble what you are wanting it to look like?

2 hours ago, inunzi said:

@Lauri do you think you can send pictures of the problem? And send screen shots of something that can help resemble what you are wanting it to look like?

In the first picture, the products are stacked on top of each other- would prefer if there were two columns instead of one.

Second picture, once you click on the image, there is a breadcrumbs at the top, is there a way to put an arrows so they can go back to the previous page instead of clicking on the breadcrumbs.

Last picture is when I hover over the picture then click on it. The picture is cut off. 😞 

@Lauri Is it cut off when the image is light boxed?

42 minutes ago, inunzi said:

@Lauri Is it cut off when the image is light boxed?

Yes

1 hour ago, Lauri said:

Yes

Hmmmm. I might have to check tomorrow if I have time. But In the mean while tag a member because they would surely help you!

Q1. Q2. Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.collection-type-products .gallery-lightbox-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
    .products.collection-content-wrapper .list-grid {
        display:grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-column-gap: 10px;
        grid-row-gap: 5px;
    }
}

2 hours ago, tuanphan said:

Q1. Q2. Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.collection-type-products .gallery-lightbox-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
    .products.collection-content-wrapper .list-grid {
        display:grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-column-gap: 10px;
        grid-row-gap: 5px;
    }
}

 

You are a life saver. Thank you so very much! I really appreciate it. 

@tuanphan one more question if you don’t mind, is there a way to have to icons on my homepage go horizontally instead of stacked as it is on the mobile. 
 

the picture I’m attaching is not how I want the images to look. Want them to be side by side. 

5 hours ago, Lauri said:

@tuanphan one more question if you don’t mind, is there a way to have to icons on my homepage go horizontally instead of stacked as it is on the mobile. 
 

the picture I’m attaching is not how I want the images to look. Want them to be side by side. 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage .gallery-grid-wrapper {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
}
}