Jump to content

Resize Poster Image on Desktop

Recommended Posts

I am trying to resize the first image you see on my homepage on desktop. I have used CSS to alter the size of the text and button on mobile and I'm happy with how that looks now but I want the desktop image to have a ratio of 2:1 without stretching the image, just cutting off the top and bottom. 

www.batchcoffee.co.uk

Thanks in advance guys 🙂

Link to comment

It looks like you are using a poster image, which should keep it's inherent ratio (unlike a background image, which fills the space). Are you wanting it to crop on desktop?

You could try this Custom CSS:

@media only screen and (min-width:768px) {
  #block-yui_3_17_2_1_1666910696019_17181 {
    padding-bottom:50% !important;
  }
}

 

Edited by Ziggy

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hey Ziggy! 

Thanks for getting back to this. 

So I want the desktop image to look how it looks now (I just changed it). But the mobile image to be the full image. I basically want the desktop to be cropped from the top and bottom. 

🙂

Link to comment

Did the code I shared work?

Edited by Ziggy

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 weeks later...

Why not use the image as a background for the section rather than an image block, it would be easier to control the height, possibly by using this solution:

https://www.will-myers.com/articles/prevent-background-images-from-cropping-in-squarespace-71

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 weeks later...

Cheers Ziggy. My template doesn't have the option of background images. I'm sure this is a problem that many people must face. I would have assumed there would be an easy fix. Surely not everyone wants the same size image on desktop to mobile. 

 

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.