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

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!

Share this post


Link to post

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?

Share this post


Link to post

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

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
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.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...