Jump to content

How to change or disable image autoscaling when the browser window is resized

Recommended Posts

Link: https://dove-goby-4gnr.squarespace.com/
Password: OCA2022PASSWORD

Hi there,

I'm trying to change the behaviour of an image on a single page of my website.

When the browser window is made smaller the logo gets resized accordingly, however this results in the logo looking too small.

 

Is there a code to make the logo resize not as much? If this cannot be done perhaps disabling autoscaling all together, although I'd prefer reducing the amount of resizing the logo does.

Thank you!

Ernest

Untitled-1 copy.jpg

Link to comment
  • Replies 10
  • Views 883
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

You have the logo image set to "FIT" so it never exceeds the container, the logo is constrained by the height and width because you have the image block very similar size to the logo (on a wide screen it is constrained by the height, narrow screen by the width). As the viewport gets narrower the image has to scale down because the columns all get narrower.

Your solution is to adjust the width of the image block to be wider. This won't impact the size of the image as it is still constrained by the block height, but will mean that it doesn't scale when the width is reduced.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hmm that is interesting, try these settings for the section:

image.png.799c165198d3f56df83eb2ffa7dab1dd.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I'm honestly not sure why your page is scaling the way that it is, I'm not able to reproduce what's happening. Could you try adding this Custom CSS:

section[data-section-id="63ebcb03c7739f287948e486"] {
  min-height: 420px;
}

Let me know if that helps.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Yes, that's what I see too. Sorry that code didn't work. 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I don't know of a way to do that, nor do I really understand why it's doing this to the extent it is for your website. You may want to repost the question, and maybe someone else will be able to find the answer.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.