Jump to content

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

Recommended Posts

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.

Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

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!

 

Screenshot 2020-04-20 10.54.08.png

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
19 minutes ago, theneoncollective said:

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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!

Screenshot 2020-04-20 15.29.16.png

Screenshot 2020-04-20 15.29.23.png

Screenshot 2020-04-20 15.29.30.png

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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.

 

Link to comment

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;
}
}

 

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

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. 

Skærmbillede 2020-09-08 kl. 11.50.42.png

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
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

 

 

 

Capture d’écran 2021-12-30 à 01.59.06.png

Capture d’écran 2021-12-30 à 01.59.38.png

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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?

Capture d’écran 2022-01-06 à 10.37.44.png

Link to comment
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?

Capture d’écran 2022-01-06 à 10.37.44.png

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.