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

11 minutes ago, tuanphan said:

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

image.thumb.png.49d0494bc6403bdcf5bc70e1338e6169.png

yes i tried to make them all 100 pixel heigh but for some reason they move around when i put more than 3 
i was thinking if its possible to make it so i can scroll through them like a carousel 

http://kenwheeler.github.io/slick/ i tried to follow this guide but i am a newbie in these things so i didnt know where to put the codes even after watching the guide 

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

4 minutes ago, Stefotis said:

yes i tried to make them all 100 pixel heigh but for some reason they move around when i put more than 3 
i was thinking if its possible to make it so i can scroll through them like a carousel 

http://kenwheeler.github.io/slick/ i tried to follow this guide but i am a newbie in these things so i didnt know where to put the codes even after watching the guide 

You can use gallery block, instead of image blocks

Link to post
On 5/17/2020 at 1:02 AM, tuanphan said:

You can use gallery block, instead of image blocks

hey thanks again for the reply,  is it possible to have 4 logos per reel with spacing? should i add blank pictures for the spacing?

thanks again

 

sumo11.png

Edited by Stefotis
Link to post
  • 2 months later...
23 hours ago, MDouglas said:

Hi @tuanphan

You previously supplied me with code so my logo wall would fit into 2 columns on mobile.

I have a logo wall within the ABOUT section of my site where this works - I have another logo wall within the WORK section of my site and I would like the same - I just can't figure out the code - are you able to help me?

Thanks in advance.

URL - https://plums-goby-c7a8.squarespace.com/
PWD - opensesame

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
}

 

Link to post
16 minutes ago, MDouglas said:

Thanks for the guidance @tuanphan - I added the CSS but unfortunately it didn't work - any ideas? 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5eaae8904f46fa106b561875 .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5eaae8904f46fa106b561875 .span-12 .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

 

Link to post
  • 1 month later...

Hi, I'm having similar problem. Partner Logo on desktop looks fine, but on mobile it becomes way too big as it displays 1 logo each row. I want my logo walls to show 2 logo per row in mobile.

Is there anyway to do this?

My site is: https://www.ahacommerce.net/ (Scroll down to 'Rekan AHA') 

 

I currently have no knowledge of css. Would appreciate the help. 

Thank you so much!

 

Screen Shot 2020-10-02 at 11.57.55.png

Screen Shot 2020-10-02 at 11.59.22.png

Link to post
3 hours ago, inairdaaksiram said:

Hi, I'm having similar problem. Partner Logo on desktop looks fine, but on mobile it becomes way too big as it displays 1 logo each row. I want my logo walls to show 2 logo per row in mobile.

Is there anyway to do this?

My site is: https://www.ahacommerce.net/ (Scroll down to 'Rekan AHA') 

 

I currently have no knowledge of css. Would appreciate the help. 

Thank you so much!

 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* logos on mobile */
div#page-section-5f48e8279528fc5307c84244 .span-2 .image-block {
    width: 50% !important;
    float: left !important;
    clear: none !important;
    padding: 0 !important;
}
}

 

Link to post
  • 2 weeks later...
On 10/2/2020 at 3:28 PM, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
/* logos on mobile */
div#page-section-5f48e8279528fc5307c84244 .span-2 .image-block {
    width: 50% !important;
    float: left !important;
    clear: none !important;
    padding: 0 !important;
}
}

 

It worked! Thank you so much!

Link to post
  • 1 month later...
3 hours ago, ChocolateMaker said:

Hi! I'm having trouble with something similar. I want my products to be listed in 2 columns on my mobile shop. It is currently just one by one (vertical). Do you possibly have code for this? Thanks!

 

https://carartisanchocolate.com/shop

Add to Home > Design > Custom CSS

@media screen and (max-width:700px) {
div#productList {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 5px;
}
div#productList img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
}

 

Link to post
On 11/18/2020 at 12:01 AM, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:700px) {
div#productList {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 5px;
}
div#productList img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
}

 

Thank you, worked like a charm! Another quick question,

 

My mobile view cuts off a portion of the product image, where it doesn't for the desktop view. It is specifically for the first photo, Mexico. How would I adjust that? Thank you!

Link to post
  • 2 weeks later...
On 11/22/2020 at 6:08 AM, ChocolateMaker said:

Thank you, worked like a charm! Another quick question,

 

My mobile view cuts off a portion of the product image, where it doesn't for the desktop view. It is specifically for the first photo, Mexico. How would I adjust that? Thank you!

Have you solved it yet?

Link to post
  • 2 weeks later...
On 12/2/2020 at 12:47 AM, tuanphan said:

Have you solved it yet?

No, I am trying to have the product blend in with the background (white). For desktop version, I could adjust the image to look nice, but not for mobile. I want to add just a photo of the product without any background and then resize the product to not get cut off. Thank you!

Link to post
On 11/22/2020 at 6:08 AM, ChocolateMaker said:

Thank you, worked like a charm! Another quick question,

 

My mobile view cuts off a portion of the product image, where it doesn't for the desktop view. It is specifically for the first photo, Mexico. How would I adjust that? Thank you!

Try adding to Home > Design > Custom CSS

@media screen and (max-width:640px) {
#productList .product .product-image img {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
}
}

 

Link to post
On 12/15/2020 at 8:09 PM, kvizzt said:

Hello @tuanphan I have trying to figure out the style sheet. 

But I don't get it right. I also want two have a two column logo wall. 

Its in the bottom of the page please any advice or help would be very thankful. 

https://zwarbrothers.squarespace.com

pass: zwar

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5fbf85f6bc819f1cf4d362df .span-12>.row>.span-3 {
    float: left !important;
    width: 50% !important;
}
div#page-section-5fbf85f6bc819f1cf4d362df .span-12>.row .span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

 

Link to post
On 12/22/2020 at 7:51 AM, ktepper said:

Hi!

Is there some code to help me as well? On Desktop I want 6 across but on mobile I'm hoping for it to be 2x2.

I can't use a gallery bc I need the TITLE over the image. 

https://falcon-blackbird-xd69.squarespace.com/
 

PW: hELLOFRIEND1!

Thank you!!


Home page where it says

"Warmth. Coziness. Great service."

 Add to Home > Design > Custom CSS

/* images side by side */
@media screen and (max-width:767px) {
div#page-section-5fda72262f307673029b3fbf>.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5fda72262f307673029b3fbf>.row>.span-2:nth-child(2n+1) {
    clear: left;
}
}

 

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