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 10
  • Views 4.2k
  • 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
  • 2 years later...
On 4/18/2024 at 8:59 PM, Miicherey said:

Hi I also need help. I need to make the flower image on the footer larger only on the Contact Us page and only on desktop view. I attached a screenshot on how I want it to look like. Hopy you can help me. TYIA!

URL: Contact Us — Componere (squarespace.com)

Password: vip

 

 

Untitled-1.jpg

Can you check site url?

image.png.fadcc0cc2c01ff7f034b1e3262637adb.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.