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

How to Adjust to 2 columns in Masonry Grid in Mobile View in Squarespace 7.1


sskkkkk

Question

Site URL: https://capybera-llama-l3jx.squarespace.com/basic-cakes-and-cookies

Hi guys, 

I would like to customise to display 2 images in 1 row in Masonry Grid in Mobile View.

I have use this before but didn't work for me.

Quote

@media screen and (max-width: 767px) {
  .sqs-gallery-block-grid {
    width: 50%;
  }
}

Here is my website url: https://capybera-llama-l3jx.squarespace.com/basic-cakes-and-cookies
Please advise. Thanks!

Edited by sskkkkk
Link to post
  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

No easy way for that from JS side - SS wrote code in manner you can't really access it or affect, and all masonry calculations goes in code. But damn, that's a simple CSS, nothing complex:  

Hey, this code is great apart from the fact it's not in order. I've combined both your code and @tuanphan's code but i still get some vertical spacing. Here is the code: @media screen and (max-wid

Posted Images

15 answers to this question

Recommended Posts

  • 0
On 2/19/2020 at 8:44 AM, sskkkkk said:

I'm looking for 2 images in 1 row in Masonry Grid in Mobile View.

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
figure.gallery-masonry-item {
    width: 50% !important;
    float: left !important;
    transform: unset !important;
    position: initial !important;
}
figure.gallery-masonry-item img {
    width: 100% !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
}

 

Link to post
  • 0
17 minutes ago, wholeheartcreative said:

Hi @tuanphan ! I'm trying to sort out the same thing with another website I'm working on:

 

https://pigeon-koala-t94f.squarespace.com/

password: sj 

Basically I want it to show like this one mobile:

e gaps on top and under it. 

Any solution to this? Thank you in advance.

You need another code. Above code will create problem with some images.

I'm solving same problem for a client (in progress). 

I think I will use grid, but it still has some problems, still testing

Edited by tuanphan
Link to post
  • 0
1 minute ago, wholeheartcreative said:

@tuanphan all good thank you for the fast reply! all the best with it! 🙂

By the way, do you know what the best way to contact Squarespace head developers for concerns like this?

I only contact email/livechat....but they will not support custom code

Link to post
  • 0
On 2/22/2020 at 7:45 PM, tuanphan said:

You need another code. Above code will create problem with some images.

I'm solving same problem for a client (in progress). 

I think I will use grid, but it still has some problems, still testing

Hi @tuanphan  How are you? Were you able to figure for your client by any chance? 🙂 

Link to post
  • 0
1 minute ago, wholeheartcreative said:

Hi @tuanphan  How are you? Were you able to figure for your client by any chance? 🙂 

I dropped that job, the client is not happy with the end result, there are some problems generated from the code. ☹️

Link to post
  • 0
3 hours ago, tuanphan said:

I dropped that job, the client is not happy with the end result, there are some problems generated from the code. ☹️

Oh no 😞 Sorry to hear that. Thank you for your reply as always.
I guess I'd have to settle with a grid for now. How I wish it was easy! 

Link to post
  • 0
3 hours ago, wholeheartcreative said:

Oh no 😞 Sorry to hear that. Thank you for your reply as always.
I guess I'd have to settle with a grid for now. How I wish it was easy! 

Just found this plugin, you can try ;)

(affiliate link)

Edited by tuanphan
Link to post
  • 0
On 3/2/2020 at 6:04 AM, wholeheartcreative said:

Oh no 😞 Sorry to hear that. Thank you for your reply as always.
I guess I'd have to settle with a grid for now. How I wish it was easy! 

No easy way for that from JS side - SS wrote code in manner you can't really access it or affect, and all masonry calculations goes in code.
But damn, that's a simple CSS, nothing complex:

 

 

@media (max-width: 576px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0 5px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 5px!important;
        box-sizing: border-box;
    }

    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
      	width: 100%!important;
    }
}
Edited by michaeleparkour
Link to post
  • 0
On 5/3/2020 at 4:45 PM, michaeleparkour said:

No easy way for that from JS side - SS wrote code in manner you can't really access it or affect, and all masonry calculations goes in code.
But damn, that's a simple CSS, nothing complex:

 

 


@media (max-width: 576px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0 5px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 5px!important;
        box-sizing: border-box;
    }

    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
      	width: 100%!important;
    }
}

Hey, this code is great apart from the fact it's not in order. I've combined both your code and @tuanphan's code but i still get some vertical spacing. Here is the code:

@media screen and (max-width:640px) {
figure.gallery-masonry-item {
    width: 50% !important;
    float: left !important;
    transform: unset !important;
    position: initial !important;
    display: block!important;
    padding: 5px!important;
    box-sizing: border-box;
}
figure.gallery-masonry-item img {
    width: 100% !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
}

I've also attached how this code is looking. The only issue is the space between the landscape and portrait photos. Feel like we're on the verge of actually getting this code perfect.

Screenshot 2020-05-27 at 12.54.35 am.png

Edited by lauzza
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...