Jump to content

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 8
  • 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. 
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
  • 1 year later...
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?

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
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?

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

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.