Reducing size of footer logo

Site URL: https://clover-grouper-ndjg.squarespace.com/homepage

I cannot seem to reduce the size of the logo in my footer beyond its current size. When I reduce the size it makes it off centre. Please help!

Add to Design > Custom CSS

/* resize footer logo mobile */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1613323242497_6044 {
    width: 50%;
    margin: 0 auto;
}
}

Hi Tuanphan. I've come across several replies of yours, showing different CSS code injection meant to reduce the size of a footer logo when displaying on mobile devices . I'm wondering if you can help me to understand which elements of the code are the parts that impact the logo size so that I can play with it. I'm noticing that 50% isn't enough of a reduction for my logo to show up properly when viewed on a phone. 

Here's the code I've been using...

@media screen and (max-width:640px) {
div#block-#block-yui_3_17_2_1_1639858540498_6652 img {
    width: 20% !important;
    height: auto !important;
    transform: translateX(-50%);
    left: 50% !important;
}
div#block-#block-yui_3_17_2_1_1639858540498_6652 .image-block-wrapper {
    padding-bottom: 50% !important;
}
}

15 hours ago, 1x4x9 said:

Hi Tuanphan. I've come across several replies of yours, showing different CSS code injection meant to reduce the size of a footer logo when displaying on mobile devices . I'm wondering if you can help me to understand which elements of the code are the parts that impact the logo size so that I can play with it. I'm noticing that 50% isn't enough of a reduction for my logo to show up properly when viewed on a phone. 

Here's the code I've been using...

@media screen and (max-width:640px) {
div#block-#block-yui_3_17_2_1_1639858540498_6652 img {
    width: 20% !important;
    height: auto !important;
    transform: translateX(-50%);
    left: 50% !important;
}
div#block-#block-yui_3_17_2_1_1639858540498_6652 .image-block-wrapper {
    padding-bottom: 50% !important;
}
}

Remove it & try this code

@media screen and (max-width:640px) {
#block-yui_3_17_2_1_1639858540498_6652{
    width: 50% !important;
}
}

If it doesn't work, please share link to your site

Fantastic! That did the trick tuanphan. I reduced it down to 20% to get the effect I wanted. Thank you so much!

Best, Ben Parco

https://www.parcostudio.com/