Looking to shrink size of mini gallery blocks on mobile

Site URL: https://bit.ly/3QAVmGX

Hi there! 

I'm looking to shrink these mini gallery slide show blocks on my home page. The logos are way too big on mobile. First time poster, long time viewer here haha. Hope someone might be able to help me out here. I've seen many of your responses @tuanphan, if you're around would love your support. Thank you all!
 

On 8/18/2022 at 10:03 PM, MayaChris said:

Site URL: https://bit.ly/3QAVmGX

Hi there! 

I'm looking to shrink these mini gallery slide show blocks on my home page. The logos are way too big on mobile. First time poster, long time viewer here haha. Hope someone might be able to help me out here. I've seen many of your responses @tuanphan, if you're around would love your support. Thank you all!
 

Hi,

Place 2 - 3 images/row or make image smaller?

On 8/19/2022 at 11:01 PM, tuanphan said:

Hi,

Place 2 - 3 images/row or make image smaller?

Hi there! 

Thank you for your response. The first image is how it looks on the desktop version and the second image is how it looks on mobile. I would like to be able to make the images smaller on mobile. Right now, I'm having a hard time isolating the image blocks and i believe because they are currently set as mini gallery/ slideshow blocks. Thank you again @tuanphan!

On 8/23/2022 at 7:38 AM, MayaChris said:

Hi there! 

Thank you for your response. The first image is how it looks on the desktop version and the second image is how it looks on mobile. I would like to be able to make the images smaller on mobile. Right now, I'm having a hard time isolating the image blocks and i believe because they are currently set as mini gallery/ slideshow blocks. Thank you again @tuanphan!

Add to Design > Custom CSS

@media screen and (max-width:640px) {
section#corportateclients img {
    transform: scale(0.5);
}
}

Hi @tuanphan! 

Is there anyway to shrink the space/padding between the icons? Thank you so much!

Attached is the before and after screenshots.

On 8/24/2022 at 10:37 PM, MayaChris said:

Hi @tuanphan! 

Is there anyway to shrink the space/padding between the icons? Thank you so much!

Attached is the before and after screenshots.

Can you disable temporarily auto-change image feature?

I'm not sure. Are you referring to disabling the "slide show" feature and change it to a grid? 

On 8/27/2022 at 4:58 AM, tuanphan said:

Can you disable temporarily auto-change image feature?

11 hours ago, MayaChris said:

I'm not sure. Are you referring to disabling the "slide show" feature and change it to a grid? 

Image changes after seconds

I was hoping to keep the slideshow effect with so many logos to present. Is that the only way to go about changing the spacing between each logo on mobile? Thank you!

On 9/1/2022 at 12:39 AM, MayaChris said:

I was hoping to keep the slideshow effect with so many logos to present. Is that the only way to go about changing the spacing between each logo on mobile? Thank you!

Hi. Disable it temporarily, difficult to check the code when it is enabled. If I find code, you can enable then.

If the site is live & you can't disable it, you can duplicate the page & share duplicated page url.

On 9/2/2022 at 8:15 PM, tuanphan said:

Hi. Disable it temporarily, difficult to check the code when it is enabled. If I find code, you can enable then.

If the site is live & you can't disable it, you can duplicate the page & share duplicated page url.

New link: https://bit.ly/3BiB7sp 

Here you are with a copied version. 

Thank you again @tuanphan!
 

11 hours ago, MayaChris said:

New link: https://bit.ly/3BiB7sp 

Here you are with a copied version. 

Thank you again @tuanphan!
 

You want them like this?

On 9/6/2022 at 4:16 AM, tuanphan said:

You want them like this?

Just now, MayaChris said:

Yesss @tuanphan! That would be great with the slideshow effect.

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
div#page-631665f4e666f56ecfca65c5 .span-2 {
    width: 50% !important;
    float: left !important;
}
div#page-631665f4e666f56ecfca65c5 .span-2:nth-child(2n+1) {
    clear: left !important;
}
}

On 9/7/2022 at 6:42 PM, tuanphan said:

@tuanphanI added it to the copied page, and it adjusted the icons properly. However, I went ahead and added the code back to the logo section on the home page, using the section id "#corporatelogos" to replace "div#page-6316654e..."  in the code you provided to translate the code to the original location but it didn't work. 

Thank you so much for all your help here!

 

 

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
div#page-631665f4e666f56ecfca65c5 .span-2 {
    width: 50% !important;
    float: left !important;
}
div#page-631665f4e666f56ecfca65c5 .span-2:nth-child(2n+1) {
    clear: left !important;
}
}

 

11 hours ago, MayaChris said:

 

Which exact code did you add after use new id?

12 hours ago, tuanphan said:

Which exact code did you add after use new id?

I tried both these variations to capture the index page section:

@media screen and (max-width:640px) {
div#corportateclients .span-2 {
    width: 50% !important;
    float: left !important;
}
div#corporateclients .span-2:nth-child(2n+1) {
    clear: left !important;
}
}

@media screen and (max-width:640px) {
#corporateclients .span-2 {
    width: 50% !important;
    float: left !important;
}
#corporateclients .span-2:nth-child(2n+1) {
    clear: left !important;
}
}

On 9/16/2022 at 10:50 AM, MayaChris said:

I tried both these variations to capture the index page section:

@media screen and (max-width:640px) {
div#corportateclients .span-2 {
    width: 50% !important;
    float: left !important;
}
div#corporateclients .span-2:nth-child(2n+1) {
    clear: left !important;
}
}

 

 

@media screen and (max-width:640px) {
#corporateclients .span-2 {
    width: 50% !important;
    float: left !important;
}
#corporateclients .span-2:nth-child(2n+1) {
    clear: left !important;
}
}

Hi @tuanphan

Do you happen to have any suggestions for another way I should be tagging this section for the code to show up on my home page?

Thank you so much!

12 hours ago, MayaChris said:

Hi @tuanphan

Do you happen to have any suggestions for another way I should be tagging this section for the code to show up on my home page?

Thank you so much!

Did you solve? It looks fine to me now

Unfortunately @tuanphan That is not what I'm seeing on the home page here. 

Which page in your screenshot? My screenshot is from https://www.portiaobeng.com/corporate-clients-copy

@tuanphan My screenshot is from the homepage. www.portiaobeng.com.

On 9/21/2022 at 10:30 PM, MayaChris said:

@tuanphan My screenshot is from the homepage. www.portiaobeng.com.

Try this new code

@media screen and (max-width: 640px) {
    div#page-62fc31bde7c0df6fb40d86af .span-2 {
        width:50% !important;
        float: left !important;
    }

    div#page-62fc31bde7c0df6fb40d86af .span-2:nth-child(2n+1) {
        clear: left !important;
    }
}

On 9/24/2022 at 12:00 AM, tuanphan said:

Try this new code

@media screen and (max-width: 640px) {
    div#page-62fc31bde7c0df6fb40d86af .span-2 {
        width:50% !important;
        float: left !important;
    }

    div#page-62fc31bde7c0df6fb40d86af .span-2:nth-child(2n+1) {
        clear: left !important;
    }
}

OMG, that did the trick!! Thank you so much for your time, effort, and patience throughout this process.

To add this to another part of my site would I just change:

 div#page-62fc31bde7c0df6fb40d86af

If so, would I find this by right clicking and "inspecting the element"? It looks like I can't find this identifier by using SQSP finder ID. 

Thank You!
@tuanphan