Dividing gallery section images into two columns on mobile view in 7.1

Site URL: https://www.puuseppakimmow.fi/

Hi! I am adding a Gallery section to my site's (puuseppakimmow.fi) front page. I manage to create a nice row of four images (grid: simple). But, in mobile all the images are displayed in column-wide, so the visitor has to scroll all four images to get to the actual content. Is it somehow possible to divide the Gallery section mobile view into two columns? I use 7.1 template.

I would very much appreciate your help.

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(2,auto) !important;
}
}

@tuanphan Thank you so very much! Seems to work well. 😃

@tuanphan Can you help me out on why this isn't working on my products page? I am not sure why its not working, perhaps I'm targeting the wrong elements in the inspector? 

This is the code I am using from the above : 

@media screen and (max-width:640px) {
.products .list-grid {
    grid-item: repeat(2,auto) !important;
}
}

Site in progress : https://seahorse-blenny-hwjr.squarespace.com/shop Password : goldenmoon

9 minutes ago, LycheeMothCreative said:

@tuanphan Can you help me out on why this isn't working on my products page? I am not sure why its not working, perhaps I'm targeting the wrong elements in the inspector? 

 

This is the code I am using from the above : 

@media screen and (max-width:640px) {
.products .list-grid {
    grid-item: repeat(2,auto) !important;
}
}

Site in progress : https://seahorse-blenny-hwjr.squarespace.com/shop Password : goldenmoon

@media screen and (max-width:640px) {
.list-grid {
    grid-template-columns: repeat(2,auto);
    display: grid;
}
}

@tuanphan THANK YOU!!! 😍

Hi @tuanphan! You are an oracle thank you so much for this code! It works perfectly for me minus one small tweak and I'm not sure where to adjust it very slightly, you'll notice the thumbnails of my products are overlapping slightly, how can I increase the padding between them do you know? 

Thank you so much again!

50 minutes ago, theneoncollective said:

Hi @tuanphan! You are an oracle thank you so much for this code! It works perfectly for me minus one small tweak and I'm not sure where to adjust it very slightly, you'll notice the thumbnails of my products are overlapping slightly, how can I increase the padding between them do you know? 

Thank you so much again!

add grid-column-gap & row-gap to above code

.list-grid {
    grid-template-columns: repeat(2,auto);
    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}

THANK YOU so much @tuanphan! Absolutely brilliant, worked a charm! Just one more little tweak, the products on the right seem to be ever so slightly bigger than the ones on the left, I'm completely baffled! Do you think there's something else I may need to change?

Thank you again, so grateful!

23 minutes ago, theneoncollective said:

 

 

Can you share link to page in screenshot?

@tuanphan of course! It's https://www.southernanglingspecialists.uk/shop 

Thank you!

19 minutes ago, theneoncollective said:

@tuanphan of course! It's https://www.southernanglingspecialists.uk/shop 

Thank you!

Yes, so weird..

Remove 2 codes I sent, and uses this

@media screen and (max-width:767px) {
.products.collection-content-wrapper .list-grid .grid-item {
    float: left;
    width: 49%;
}
.products.collection-content-wrapper .list-grid .grid-item:nth-child(2n+1) {
    margin-right: 1%;
    clear: left;
}
}

Hi @tuanphan! This is so great, thank you! So pleased! I do have one more quick question, if you wouldn't mind! I'm not sure if it's too do with the code I've just implemented, but the mobile viewing of the product itself is quite off-centre, see attached! It's across all products and I'm not sure why, do you think we may have altered it slightly?

Thank you so much!

Product images: Seems fine here

With add to cart, quantity,..

@media screen and (max-width:767px) {
/* add to cart */
.sqs-add-to-cart-button-wrapper {
    overflow: hidden;
    width: 70% !important;
}
.sqs-add-to-cart-button {
    width: 100% !important;
    min-width: unset !important;
}
/* variant */
.ProductItem-details .product-variants {
    width: 75%;
    overflow: hidden;
}
.variant-option {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    min-width: unset !important;
    width: 100%;
}

}

You may also like: Seems fine

On 2/22/2020 at 8:12 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(2,auto) !important;
}
}

I've used this on this page - https://chiton-icosahedron-3zz8.squarespace.com/about

but theres more padding between rows than there is between columns on mobile, it isn't a nice grid.

Hi! I am trying to use the code you provided above (pasted below), however, the product view on mobile has a few issues on my end. 

Is there a way to add some padding? Also, the righthand column looks much smaller than the left on some of the product pages and isn't aligning correctly - like the columns don't have fixed widths.  I tried to follow the thread above, but that code isn't working for me.

Thank you in advance!

@media screen and (max-width:640px) {
.list-grid {
    grid-template-columns: repeat(2,auto);
    display: grid;
}
}

On 6/6/2020 at 12:43 AM, abibacon said:

 

@media screen and (max-width:640px) {
.gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(2,auto) !important;
    grid-column-gap: 3vw !important;
    grid-row-gap: 3vw !important;
}
}

6 hours ago, OliviaFitz said:

Hi! I am trying to use the code you provided above (pasted below), however, the product view on mobile has a few issues on my end. 

Is there a way to add some padding? Also, the righthand column looks much smaller than the left on some of the product pages and isn't aligning correctly - like the columns don't have fixed widths.  I tried to follow the thread above, but that code isn't working for me.

Thank you in advance!

 

@media screen and (max-width:640px) {
.list-grid {
    grid-template-columns: repeat(2,auto);
    display: grid;
}
}

 

@media screen and (max-width:640px) {
.list-grid {
    grid-template-columns: repeat(2,auto);
    display: grid;
	grid-column-gap: 5px;
	grid-row-gap: 5px;
}
}

Hello guys, 

I have the same problem with my site though the image overlapping the price is on the related products section and i cant seem to edit it normally on design/style. Keep in mind this responsiveness issue only occurs during Mobile view and item spacing only works on the side padding not below. Can any of you help me with this issue. Please view the image for more insights. Thank you. 

On 9/8/2020 at 4:55 PM, Topher_Anth said:

Hello guys, 

I have the same problem with my site though the image overlapping the price is on the related products section and i cant seem to edit it normally on design/style. Keep in mind this responsiveness issue only occurs during Mobile view and item spacing only works on the side padding not below. Can any of you help me with this issue. Please view the image for more insights. Thank you. 

 

Can you share link to page in screenshot? We can check easier.

Hi I have the same issue with my website Kiskalab.com I'm using 7.1

Is it possible to keep to 2 gifs in the same row in mobile view?

Thanks in advance

On 12/30/2021 at 8:01 AM, Ruslan said:

Hi I have the same issue with my website Kiskalab.com I'm using 7.1

Is it possible to keep to 2 gifs in the same row in mobile view?

Thanks in advance

 

 

 

Add to Design > Custom CSS

/* Mobile gifs 2 columns */
@media screen and (max-width:767px) {
div#page-section-61493333660b1e207c52553e .span-4 {
    width: 50% !important;
    float: left !important;
}
}

Thank you so much Tuan!

It worked perfectly but the gifs seemed to be to small in mobile view. So I decided to delete the spacer between them and now the code is not working anymore. What should I change in it? Site kiskalab.com 

Is there a possibility to have to gifs next to each other without spacers in mobile view?

On 1/6/2022 at 4:38 PM, Ruslan said:

Thank you so much Tuan!

It worked perfectly but the gifs seemed to be to small in mobile view. So I decided to delete the spacer between them and now the code is not working anymore. What should I change in it? Site kiskalab.com 

Is there a possibility to have to gifs next to each other without spacers in mobile view?

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-61493333660b1e207c52553e .span-5 {
    width: 50% !important;
    float: left !important;
}
}