Jump to content

Code to make 2 columns gallery in mobile version instead of just 1 (7.1)

Recommended Posts

  • Replies 10
  • Views 572
  • Created
  • Last Reply

Top Posters In This Topic

Try this thread:

 

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 1/20/2023 at 3:20 PM, Ziggy said:

Try this thread:

 

 

unfortunately it doesn't work out with my template. I found an other code in the forum (see below) - which works, but the gap between the images are way too far. has anybody an idea how to solve this ... ? really appreciate 

 

code:

@media(max-width:767px) {
.gallery-strips-item {
    width: 100% !important;
    position: unset !important;
    transform: unset !important; 
}

.gallery-strips-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    height: unset !important;
}

.gallery-strips-item img {
    object-fit: contain !important;
    height: 100% !important;
}
  
}
 

 

 

IMG_0059.PNG

Link to comment

Add this code to Design > Custom CSS

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

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

image.thumb.png.09c0b7bb2ea5aadf101f8ed09b8c1b97.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/28/2023 at 8:53 AM, tuanphan said:

Add this code to Design > Custom CSS

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

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

image.thumb.png.09c0b7bb2ea5aadf101f8ed09b8c1b97.png

 

Hi Tuanphan

Thank you very much, it looks apparently perfect, but it slows down the whole page, that is not useable. It also loads first all images and put it on the left column, and then fills the right side up. It should display first picture left, second right, then third left again under the first one, and right again, and so on. May be that's why the page needs so much time to load.  And one site doesn't load at all (places).

If you have any suggestions, pleas let me know.  Thanks!

 

Link to comment
On 2/2/2023 at 10:42 PM, M-Ri84 said:

 

Hi Tuanphan

Thank you very much, it looks apparently perfect, but it slows down the whole page, that is not useable. It also loads first all images and put it on the left column, and then fills the right side up. It should display first picture left, second right, then third left again under the first one, and right again, and so on. May be that's why the page needs so much time to load.  And one site doesn't load at all (places).

If you have any suggestions, pleas let me know.  Thanks!

 

If this code doesn't work, I don't know any other ways

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/8/2023 at 3:32 AM, tuanphan said:

If this code doesn't work, I don't know any other ways

Hi Tuanphan

Thanks a lot for your reply. May be there is an other way to solve my problem.

Do you know a CSS injection for disabling mobile view at all? I mean, can I put the mobile breakpoint to 0px or something like that?

Thanks for your effort.

Link to comment
23 hours ago, M-Ri84 said:

Hi Tuanphan

Thanks a lot for your reply. May be there is an other way to solve my problem.

Do you know a CSS injection for disabling mobile view at all? I mean, can I put the mobile breakpoint to 0px or something like that?

Thanks for your effort.

Hi, no way. Each page/each section will need a different code

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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.