Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Image Re-Sizing In Footer


Recommended Posts

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!

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

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?

Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...