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

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!

Share this post


Link to post
Posted (edited)
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

Share this post


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

Share this post


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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

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?

Share this post


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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

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

 

Share this post


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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Oh I see - apologies for that, my bad.
 

URL - plums-goby-c7a8.squarespace.com

Password - test
 

Thanks in advance.

Share this post


Link to post
Posted (edited)
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

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


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

Share this post


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