3 images side by side on mobile view

Hi @tuanphan,

I have a similar issue, can you help please? I want the images to display as a gird, ideally 4 columns, like in  desktop view. 

https://keyboard-cyan-29l8.squarespace.com/press-1

Currently the mobile view condenses it to one icon per row, and the 'press' text box is in the wrong place. 

Thank you so much!

On 2/4/2021 at 5:55 AM, tuanphan said:

Add to Design > Custom CSS

/* Mobile gallery */
@media screen and (max-width:767px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
}

 

I've been working hard on a 3 column mobile display with image blocks. It isn't a gallery and this is the best code I've been able to use, but there are holes in the mobile display . Any ideas?

@media screen and (max-width:767px) {
div#page-5abcddcb88251b734ff78ed1 .image-block {
    width: 33%;
    float: left !important;
    clear: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
}

On 2/9/2022 at 11:31 PM, SittinginFlorida said:

I've been working hard on a 3 column mobile display with image blocks. It isn't a gallery and this is the best code I've been able to use, but there are holes in the mobile display . Any ideas?

 

@media screen and (max-width:767px) {
div#page-5abcddcb88251b734ff78ed1 .image-block {
    width: 33%;
    float: left !important;
    clear: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
}

 

Can you share link to page in screenshot? We can check easier

Hello! I'm trying to add custom social icons at the bottom of my team members pages. I really tried to go through all the responses here and figure it out, but its just not working. I put 4 individual images next to each other sandwiched between two spacers for sizing. 

I've tried every combination I could think of with the provided CSS (thank you tuanphan) and all of the data-section-id's and block-yui's from that section. Nothing was working. Can someone please help me get them to display side by side on mobile?  Any help would be greatly appreciated.

ALSO, slightly different. I've had to use custom CSS on every one of the small sections like the one here in red that I'm talking about because once you shrink the section size to the minimum (10) and save... everything in it is no longer centered. Does anyone know how to stop that WITHOUT using code? Am I doing something wrong there?

https://www.thetenmg.com/leauxfi

Hi @tuanphan,

I have tried implementing the above codes to suit my website, but with no luck!

Could you please help me to do the same for this logo wall on mobile - I want 2-3 logos per row in mobile?

www.kindenterprises.co

Thanks heaps!

Sophie

On 2/14/2022 at 4:13 PM, LeauxFi said:

Hello! I'm trying to add custom social icons at the bottom of my team members pages. I really tried to go through all the responses here and figure it out, but its just not working. I put 4 individual images next to each other sandwiched between two spacers for sizing. 

I've tried every combination I could think of with the provided CSS (thank you tuanphan) and all of the data-section-id's and block-yui's from that section. Nothing was working. Can someone please help me get them to display side by side on mobile?  Any help would be greatly appreciated.

ALSO, slightly different. I've had to use custom CSS on every one of the small sections like the one here in red that I'm talking about because once you shrink the section size to the minimum (10) and save... everything in it is no longer centered. Does anyone know how to stop that WITHOUT using code? Am I doing something wrong there?

 

https://www.thetenmg.com/leauxfi

Add to Design > Custom CSS

/* Leauxfi mobile 4 icons */
@media screen and (max-width:767px) {
div#page-section-620a01bb12e07a50b7e99b18>.row:nth-child(2)>.col {
    width: 25% !important;
    float: left !important;
}
}

On 2/15/2022 at 8:50 AM, sa51 said:

Hi @tuanphan,

I have tried implementing the above codes to suit my website, but with no luck!

Could you please help me to do the same for this logo wall on mobile - I want 2-3 logos per row in mobile?

www.kindenterprises.co

Thanks heaps!

Sophie

 

 

It looks complex. I will check & let you know soon

On 2/19/2022 at 5:48 AM, tuanphan said:

Add to Design > Custom CSS

/* Leauxfi mobile 4 icons */
@media screen and (max-width:767px) {
div#page-section-620a01bb12e07a50b7e99b18>.row:nth-child(2)>.col {
    width: 25% !important;
    float: left !important;
}
}

 

Hey @tuanphan thank you for the help. Incredible how simple a code it was. But. There was an issue. Once I reintroduced the other CSS code to get the vertical align right on desktop viewing, it broke the code you showed and suddenly only 2 out of the 4 icons can be seen on mobile. So i guess something about removing the padding in that section is messing with the rows of the code you provided? Maybe? I've attached a pic below of how it looks on mobile ones this code below is active:

//member page social link footers
section[data-section-id="620a01bb12e07a50b7e99b18"] .row {
  display: flex;
  align-items: center;
  justify-content: center;
}
section[data-section-id="620a01bb12e07a50b7e99b18"] .row .col .sqs-block {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
 

instead of 

Hello How would I display these three images side by side on my website. 

The images have been uploaded as image blocks  with button blocks under each image. On desktop they display side my side in a row of 3 images with buttons below 

In Mobile view the stack on top of each other with buttons below

5 hours ago, christina_marie_333 said:

Hello How would I display these three images side by side on my website. 

The images have been uploaded as image blocks  with button blocks under each image. On desktop they display side my side in a row of 3 images with buttons below 

In Mobile view the stack on top of each other with buttons below

Can you share link to page where you have problem?

On 3/16/2022 at 4:41 PM, tuanphan said:

Can you share link to page where you have problem

Hello yes 

Www.enchantanddelight.com.au 

Page homepage. Three images on child three. I would like the buttons and images to display side by side like the display on desktop. 

Also same with child two.

I would like that image block card to display with the text and title txt beside the image of the woman holding candles instead of the mobile format with the text below the image. I really can't wait for sqaurespace to make it easier to edit mobile view 

Any help would be appropriated as my client things her site looks too busy. If you have any other suggestions that would be great? 

Maybe a better idea for displaying reviews? 

Thank you 

On 1/18/2021 at 5:13 PM, tuanphan said:

Add to Design > Custom CSS

/* services side by side */
@media screen and (max-width:767px) {
div#page-section-5fc481be9b1ed035386d54af>.row>.span-4 {
    width: 33.33% !important;
    float: left !important;
}
div#page-section-5fc481be9b1ed035386d54af>.row>.span-4 * {
    font-size: 12px;
}
}

 

How do you find the div section I.d and what sods span- mean 🙂 try trying to apply this to my clients website images have text boxes under them as well in desktop view it looks nice. In movie view it looks terrible 

#1. Page homepage. Three images on child three. I would like the buttons and images to display side by side like the display on desktop. 

You mean Product Lists on homepage (shop page)?

https://enchantanddelight.com.au/

looking to have a 3x3 images for the following logos under "/vendors" page on mobile only:

XXXXX.squarespace.com/XXXXX

pass: 1234

46 minutes ago, mcgharios said:

looking to have a 3x3 images for the following logos under "/vendors" page on mobile only:

crestan.squarespace.com/vendors

pass: 7777

 

I think 3 items/row is not possible. If you want 2 items/row, we can check & give the code

7 hours ago, tuanphan said:

I think 3 items/row is not possible. If you want 2 items/row, we can check & give the code

@tuanphan thanks for the quick reply. Yes, 2 rows will also work for me , awaiting the code...

figured it out:

@media screen and (max-width:767px) {
div#page-section-6239f21805e2e555229c40f1>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
}

Thanks

I want to do the same with my logowall at the bottom of www.reload.dk

Three images on a row on mobile. Thanks! 

I think I solved it using

/* Mobile gallery */
@media screen and (max-width:767px) {
.gallery-grid-wrapper {
grid-template-columns: repeat(3,1fr) !important;
}
} 

At least on the phone, it looks good!

I'm looking to get the same

studiorrooo.ca 

On 5/21/2023 at 6:00 AM, rrooo said:

I'm looking to get the same

 

studiorrooo.ca 

Add to Design > Custom CSS

/* masonry 3 items */
@media only screen and (max-width:767px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 3;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 1.5px!important;
        box-sizing: border-box;
    }

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

9 hours ago, tuanphan said:

/* masonry 3 items */
@media only screen and (max-width:767px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 3;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 1.5px!important;
        box-sizing: border-box;
    }

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

Wow Thank you!!

Hi @tuanphan, 

On my desktop browser I have a several galleries with three images per row. However, when viewing it on a mobile device they become 2 image rows. I've tried several codes on this forum with no luck. Can you help?

josephlim.us

Also - I'm wondering if I can add my tagline "cinematographer" to display beneath my name centered in the mobile version. 

On 8/5/2023 at 11:33 AM, myakk said:

Hi @tuanphan, 

On my desktop browser I have a several galleries with three images per row. However, when viewing it on a mobile device they become 2 image rows. I've tried several codes on this forum with no luck. Can you help?

josephlim.us

Also - I'm wondering if I can add my tagline "cinematographer" to display beneath my name centered in the mobile version. 

 

Sent in message. Use this code (Design > Custom CSS or Website > Website Tools > Custom CSS)

/* Mobile Homepage 3 columns */
@media screen and (max-width:640px) {
body.homepage .gallery-block .slide {
    width: 33.333% !important;
}
body.homepage .sqs-layout .sqs-row .gallery-block.sqs-block {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
a.Mobile-bar-branding:after {
    content: "CINEMATOGRAPHER";
    display: block;
    font-size: 16px;
}
}

Also need help with this issue could need the 4 buttons side by side at the top on mobile view. website is www.sootheskinbar.com/services and password is cssistheworst

On 11/1/2023 at 12:40 PM, SootheSkinBar said:

Also need help with this issue could need the 4 buttons side by side at the top on mobile view. website is www.sootheskinbar.com/services and password is cssistheworst

Just edit that page > Click Mobile icon on top right > Then drag them to make your desired layout