clancyjack Posted February 14, 2021 Share Posted February 14, 2021 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! Link to comment
tuanphan Posted February 16, 2021 Share Posted February 16, 2021 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
1x4x9 Posted December 27, 2021 Share Posted December 27, 2021 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; } } Link to comment
tuanphan Posted December 28, 2021 Share Posted December 28, 2021 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 1x4x9 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
1x4x9 Posted December 30, 2021 Share Posted December 30, 2021 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/ tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment