Logo wall mobile display 2 by 2

Hi all, I have created a logo wall of 8 logos. This looks great on desktop, but on mobile each of the logos scales to be the full width of the page. This means the usability of the website is majorly compromised as the user has to scroll through 8 full width images before getting to the next section of the website.

I have spoken to SquareSpace support and they have confirmed there is no way to get images to scale differently for mobile in 7.1. Does anyone have any code that could help me to display the logos in two or three columns on mobile?

Thanks!

Can you share link to that page? I think some CSS can solve.

I’ve got the same problem with a client website:

https://thermodynamx.squarespace.com

PW: 3fN3!^Mn

12 hours ago, djm said:

I’ve got the same problem with a client website:

https://thermodynamx.squarespace.com

PW: 3fN3!^Mn

You mean Trusted by...?

You want 2 logos/row or?

On 4/4/2020 at 9:57 AM, tuanphan said:

You mean Trusted by...?

You want 2 logos/row or?

@tuanphan

Yes, just after "Trusted by"

2 Logos per row would be nice. If I had a wish: perfect would be a horizontal scrolling carousel (automatic). 😉

*bump*

@tuanphan Any updates on this?

11 minutes ago, djm said:

*bump*

@tuanphan Any updates on this?

If you use Gallery Block to create logos, it will be easier...

Ok, thanks. I’ll give that a try.

On 4/17/2020 at 2:55 PM, tuanphan said:

If you use Gallery Block to create logos, it will be easier...

Somehow the gallery options in 7.1 are really constrained. I cannot tell it, how many logos it should show at once.

Is there code to display the logos in 2 columns instead of one? @tuanphan

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* 2 logo on row */
div#block-296356925219508dcf53+.row>.col:not(:last-child) {
    width: 50% !important;
    float: left !important;
}
/* last logos */
div#block-296356925219508dcf53+.row>.col:last-child .span-2 {
    float: left !important;
    width: 50% !important;
}
}

Thanks so much @tuanphan

Now it looks really neat. Nice workaround.

Hi @tuanphan

I am trying to achieve the same and have copied your code and changed the DIV ID but with no success. I don't suppose you would be able to help me out?

@tuanphan Same for me if at all possible?

https://crane-burgundy-rnlt.squarespace.com/our-work

pass- test

Thanks!

17 hours ago, robinhouse said:

@tuanphan Same for me if at all possible?

 

https://crane-burgundy-rnlt.squarespace.com/our-work

pass- test

 

Thanks!

your logos has different structure. Add to Home > Design > Custom CSS

This code is created by @michaeleparkour

@media (max-width: 767px) {
    .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;
    }
}

@tuanphan

Sorry, I'm a little new to this and not sure how to give you access to the page I'm talking about.

I think it may be plums-goby-c7a8.squarespace.com - does that work for you?

2 minutes ago, MDouglas said:

@tuanphan

Sorry, I'm a little new to this and not sure how to give you access to the page I'm talking about.

I think it may be plums-goby-c7a8.squarespace.com - does that work for you?

 

Your site is private. Please setup password & share url

Oh I see - apologies for that, my bad.
 

URL - plums-goby-c7a8.squarespace.com

Password - test
 

Thanks in advance.

7 minutes ago, MDouglas said:

Oh I see - apologies for that, my bad.
 

URL - plums-goby-c7a8.squarespace.com

Password - test
 

Thanks in advance.

your logo structure is difficult...

You need to rearrange the logos, so you can use the code.
Add 4 logos first, then add Line Block, add 4 logos, add Line Block ... Then remove all Line Blocks, and share the url again.

I will give the code. ✌️

Hi @tuanphan

I believe I've done that now 🙂

URL - plums-goby-c7a8.squarespace.com

Password - test

1 hour ago, MDouglas said:

Hi @tuanphan

I believe I've done that now 🙂

URL - plums-goby-c7a8.squarespace.com

Password - test

Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
div#block-58d96a54167d01e9fb80+.row>.col, div#page-section-5e810912854e1012be0d8ae3 .span-12>div:nth-child(3) .col, div#page-section-5e810912854e1012be0d8ae3 .span-12>div:nth-child(4) .col {
    float: left !important;
    width: 50% !important;
}
}

That's brilliant - it works perfectly @tuanphan - really appreciate your help and support! Great stuff 🙂

@tuanphan hi im new here and was wondering if you could help me i want my logos to be in line with eachother but i cannot get them to 😞

https://emu-lizard-h482.squarespace.com/config/design

pass: test

thanks in advance!

Just now, Stefotis said:

@tuanphan hi im new here and was wondering if you could help me i want my logos to be in line with eachother but i cannot get them to 😞

https://emu-lizard-h482.squarespace.com/config/design

pass: test

thanks in advance!

Mobile, desktop or tablet?

2 items/row or 3 or 4..?

42 minutes ago, tuanphan said:

Mobile, desktop or tablet?

2 items/row or 3 or 4..?

desktop im trying to get 4 per row to fit thanks for fast reply!!

5 hours ago, Stefotis said:

desktop im trying to get 4 per row to fit thanks for fast reply!!

You mean same line? You can edit images from your pc?