Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

2 column image stacking on mobile?


pashapasha1570048753

Question

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.

alt text

alt text

screen-shot-2019-09-03-at-10101-pm.jpg.2c83431198a2299f23e032072954cee5.jpg

screen-shot-2019-09-03-at-10603-pm.png.b5af66d6894ad61b5a001dc8d559f734.png

Edited by pashapasha
Initial Revision
Link to post
  • Answers 68
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#block-5e9840e42d95cc671880ffd3+.row .span-2 { width: 50% !important; float: left !important; } }  

Have you solved it yet?

Posted Images

Recommended Posts

  • 0

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!

 

 

Link to post
  • 0
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

@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 🙂

image.png.392b805b498140ae3b8341310793849c.png

Link to post
  • 0
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
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!

Link to post
  • 0
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

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 by MaverivckMPP
Link to post
  • 0
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;}

}

Link to post
  • 0

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!

Link to post
  • 0
Posted (edited)
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;}

}

Screen Shot 2020-06-03 at 12.43.15 pm.png

Edited by Trishyeah
Wanted to tag Tuanphan :)
Link to post
  • 0

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

Link to post
  • 0
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
Posted (edited)
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 by katie_w_3
Link to post
  • 0
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
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;}

}

Screen Shot 2020-06-03 at 12.43.15 pm.png

Can you share link to page in screenshot?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...