Image Re-Sizing In Footer

Site URL: https://www.bellchem.com

Good Morning,

I am attempting to add a custom button in my footer via an image, but I add the image and it looks fine when viewing on the desktop, but when I look at it on mobile, it blows up the size of the image to fit the width of the screen. How do I get it to remain small like on the desktop site?

Thanks, everyone!

After looking at another post, I successfully used this code:

/* Resize footer images */
 @media screen and (max-width: 640px) {

footer .sqs-image .sqs-image-content img, footer .image-block {

    transform: scale(0.6)

}}

But now there is way too much space in between each element. Is there any way to change the padding for the mobile version only?

Try removing your code. And Add to Home > Design > Custom CSS

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

On 3/23/2020 at 11:32 AM, tuanphan said:

 

Thanks for the reply. That didn't have much change on the spacing in the footer on mobile.

Which spacing? top or bottom

Does anyone know how to remove the spacing at the top, and how to place the image to the left side rather than the center?

11 hours ago, SannaBuckhoj said:

Does anyone know how to remove the spacing at the top, and how to place the image to the left side rather than the center?

What is site url?

Hi @tuanphan - this is the website I am working on right now: 

https://twmh.squarespace.com/

Thank you!!

15 hours ago, SannaBuckhoj said:

Hi @tuanphan - this is the website I am working on right now: 

https://twmh.squarespace.com/

Thank you!!

Hi. What should it look like?