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

Logo wall mobile display 2 by 2


Recommended Posts

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!

Link to post
  • Replies 45
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

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

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; floa

Posted Images

  • 1 month later...
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?

 

Link to post
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). 😉

Edited by djm
Link to post
  • 2 weeks later...
11 minutes ago, djm said:

*bump*

@tuanphan Any updates on this?

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

Link to post
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

Link to post

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;
}
}

 

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

 

Link to post
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

Link to post
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. ✌️

 

Edited by tuanphan
Link to post
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;
}
}

 

Link to post
  • 2 weeks later...
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..?

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

image.thumb.png.49d0494bc6403bdcf5bc70e1338e6169.png

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...