2 column image stacking on mobile?

pashapasha1570048753 · September 3, 2019

So please bear with me as I'm a novice when it comes to CSS or any of this. I've been trying to google answers for the past few hours now to no avail. Essentially I'm just looking to have 1:1 images, with a title and a description, stacked in 2 columns on mobile.

A gallery grid does basically what I want on desktop and mobile - but doesn't show descriptions. A summary block does it too but stacks one image on top of another and when I have 60+ images, it becomes a huge scroll. I have not been able to find solutions to either of these issues so if you have a solution to either instead it'd be greatly appreciated.

So now, I've just succumbed to doing individual image stacks. I've found out how to shrink the image blocks just in mobile, however I still can't them to form rows/columns despite the extra room now they have on the right (as seen in the screenshot). The code I'm using is below.

Any insight would be greatly appreciated.

Edited September 3, 2019 by pashapasha
Initial Revision

Fay · March 31

Hello

Have you figure this out? I came across the exactly same problem!!

fay

tuanphan · April 1

13 hours ago, Fay said:

Hello

Have you figure this out? I came across the exactly same problem!!

fay

If you share link to your site, I can take a look

laurenruth1 · April 1

I need to find out how to do this too, I'm using 7.1. @tuanphan could you please check this for me? Would really appreciate it!

So rather than these images stack in mobile version, I'd like two side by side:

https://denim-khaki-tp4d.squarespace.com/gallery-test

https://denim-khaki-tp4d.squarespace.com/gallery

One page is a gallery, the other is just image blocks as they needed captions underneath.

Many thanks!

tuanphan · April 2

20 hours ago, laurenruth1 said:

I need to find out how to do this too, I'm using 7.1. @tuanphan could you please check this for me? Would really appreciate it!

So rather than these images stack in mobile version, I'd like two side by side:

https://denim-khaki-tp4d.squarespace.com/gallery-test

https://denim-khaki-tp4d.squarespace.com/gallery

One page is a gallery, the other is just image blocks as they needed captions underneath.

Many thanks!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5e849c35a5dfdd3303f2ed75>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
}

laurenruth1 · April 2

@tuanphan This works, thanks so much! Is there any way of making the squares bigger and not as much padding between them? And how would I change the caption size for mobile so it's small underneath each image? Many thanks! Really appreciate it 🙂

tuanphan · April 2

1 hour ago, laurenruth1 said:

@tuanphan This works, thanks so much! Is there any way of making the squares bigger and not as much padding between them? And how would I change the caption size for mobile so it's small underneath each image? Many thanks! Really appreciate it 🙂

@media screen and (max-width:767px) {
div#page-section-5e849c35a5dfdd3303f2ed75>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5e849c35a5dfdd3303f2ed75 .image-block {
    padding: 5px;
}
div#page-section-5e849c35a5dfdd3303f2ed75 .image-block * {
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 0;
}
}

laurenruth1 · April 2

4 hours ago, tuanphan said:


@media screen and (max-width:767px) {
div#page-section-5e849c35a5dfdd3303f2ed75>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5e849c35a5dfdd3303f2ed75 .image-block {
    padding: 5px;
}
div#page-section-5e849c35a5dfdd3303f2ed75 .image-block * {
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 0;
}
}

Works perfectly, you are a genius! Thanks so much!

wkw · April 16

Hello @tuanphan, wondering if you could help with the same issue on the homepage image/buttons https://pike-helicon-sgrw.squarespace.com/ . really don't want them stacking on mobile!

tuanphan · April 18

On 4/16/2020 at 8:53 PM, wkw said:

Hello @tuanphan, wondering if you could help with the same issue on the homepage image/buttons https://pike-helicon-sgrw.squarespace.com/ . really don't want them stacking on mobile!

Sorry for delay. Have you solved yet?

wkw · April 19

Hey, no problem, I have not! Can you help?

tuanphan · April 20

13 hours ago, wkw said:

Hey, no problem, I have not! Can you help?

Your site is private. Can you setup password & share url again?

wkw · April 23

Thanks mate, - link is https://pike-helicon-sgrw.squarespace.com/ and password is 'wkw' 🙂

tuanphan · April 23

32 minutes ago, wkw said:

Thanks mate, - link is https://pike-helicon-sgrw.squarespace.com/ and password is 'wkw' 🙂

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5e8f52f652f1a1428efe454f>.row:nth-child(2) .span-2 {
    float: left !important;
    width: 50% !important;
}
}

wkw · April 23

Thanks so much for that!

MaverivckMPP · April 27

Similar issue. I have a grid gallery I want to have 3 columns on mobile, can anyone help with the css?

Right now, I'm using this css and it's making the images smaller but only in one column (mobile).

@media only screen and (max-width: 640px)
{
.gallery-grid-wrapper {
width: 33.3% !important;
}
}

url is maverickmpp.com/home-copy

Edited April 27 by MaverivckMPP

Brandcrafters · May 24

@tuanphan, I have poster images that I want side by side (2 column) on mobile.

Help!

Thank you in advance!

http://paiacommunityassociation-temp.squarespace.com/

Password: paia

Edited May 24 by Brandcrafters

LXK · May 24

On 4/27/2020 at 1:32 AM, MaverivckMPP said:

Similar issue. I have a grid gallery I want to have 3 columns on mobile, can anyone help with the css?

Right now, I'm using this css and it's making the images smaller but only in one column (mobile).

@media only screen and (max-width: 640px)
{
.gallery-grid-wrapper {
width: 33.3% !important;
}
}

url is maverickmpp.com/home-copy

Hi Maverick,

Please try adding this code to Design > Custom CSS:

@media only screen and (max-width: 640px) {

.gallery-grid-wrapper{ grid-template-columns: repeat(3, auto)!important;}

}

AlejandraMuller · May 28

Hi,

I have the same issue with my home page. My site is www.muroblanco.mx and I want the images to stack in two columns instead of one when displayed in mobile.

Can you help me with the code?

Thanks!

Trishyeah · June 3

On 5/24/2020 at 9:56 PM, LXK said:

Hi Maverick,

Please try adding this code to Design > Custom CSS:

@media only screen and (max-width: 640px) {

.gallery-grid-wrapper{ grid-template-columns: repeat(3, auto)!important;}

}

@tuanphan I'm soo hoping you can help with this!

Oh my goshhh!! This was the only code from my 2 hours or searching and trialling that made any change to anything I was doing. BUT it's all so wonky.

It's not centered/balanced, and the first image at the start of each row is larger than the rest. Hope you can help! Eeeee I finally feel like I'm getting close.

It's still in a test site so I don't have a URL for you sorry.

This is the code I'm using

@media only screen and (max-width: 640px)
{.gallery-grid-wrapper {
width: 33.33% !important;
clear: none !important;

}
}
@media only screen and (max-width: 640px) {

.gallery-grid-wrapper{ grid-template-columns: repeat(3, auto)!important;}

}

Edited June 4 by Trishyeah
Wanted to tag Tuanphan :)

katie_w_3 · June 3

Hi @tuanphan, I wonder if you can help me also. Firstly I cannot get columns to work on the product pages of the desktop site (I have used the style format to try to create 3 columns but it does nothing). I would also like the mobile site to display as 2 columns and for suggested items within the product block to display in columns.

https://www.unarodden.com/

I realise I'm asking a lot here, but any help would be greatly appreciated

tuanphan · June 3

49 minutes ago, katie_w_3 said:

Hi @tuanphan, I wonder if you can help me also. Firstly I cannot get columns to work on the product pages of the desktop site (I have used the style format to try to create 3 columns but it does nothing). I would also like the mobile site to display as 2 columns and for suggested items within the product block to display in columns.

https://www.unarodden.com/

I realise I'm asking a lot here, but any help would be greatly appreciated

I see 3 columns here, you try clearing browser cache

with 2 columns on mobile, add this code to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

katie_w_3 · June 3

25 minutes ago, tuanphan said:
I see 3 columns here, you try clearing browser cache

with 2 columns on mobile, add this code to Home > Design > Custom CSS
@media screen and (max-width:767px) {
.list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

Unfortunately @tuanphan, I still cannot see 3 columns after clearing my cache, but the code for mobile worked a treat, so thank you very much for that!

Edited June 3 by katie_w_3

tuanphan · June 3

7 hours ago, katie_w_3 said:

Unfortunately @tuanphan, I still cannot see 3 columns after clearing my cache, but the code for mobile worked a treat, so thank you very much for that!

Try other browsers.

tuanphan · June 4

On 5/29/2020 at 2:40 AM, AlejandraMuller said:

Hi,

I have the same issue with my home page. My site is www.muroblanco.mx and I want the images to stack in two columns instead of one when displayed in mobile.

Can you help me with the code?

Thanks!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-5ecd994795a4d74aea940bfe>.row>.span-4 {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
div#page-5ecd994795a4d74aea940bfe>.row>.span-4 .image-block-wrapper {
    padding-bottom: 100% !important;
}
}

tuanphan · June 4

21 hours ago, Trishyeah said:

@tuanphan I'm soo hoping you can help with this!

Oh my goshhh!! This was the only code from my 2 hours or searching and trialling that made any change to anything I was doing. BUT it's all so wonky.

It's not centered/balanced, and the first image at the start of each row is larger than the rest. Hope you can help! Eeeee I finally feel like I'm getting close.

It's still in a test site so I don't have a URL for you sorry.

This is the code I'm using

@media only screen and (max-width: 640px)
{.gallery-grid-wrapper {
width: 33.33% !important;
clear: none !important;

}
}
@media only screen and (max-width: 640px) {

.gallery-grid-wrapper{ grid-template-columns: repeat(3, auto)!important;}

}

Can you share link to page in screenshot?

2 column image stacking on mobile?

Question

Link to post

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

Posted Images

68 answers to this question

Recommended Posts

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Create an account or sign in to comment

Support

Community

Developers

Resources