TomBatch Posted March 2, 2023 Share Posted March 2, 2023 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
Ziggy Posted March 2, 2023 Share Posted March 2, 2023 (edited) 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 March 2, 2023 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
TomBatch Posted March 3, 2023 Author Share Posted March 3, 2023 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
Ziggy Posted March 3, 2023 Share Posted March 3, 2023 (edited) Did the code I shared work? Edited March 3, 2023 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
TomBatch Posted March 3, 2023 Author Share Posted March 3, 2023 No. It didn't do anything. I altered the image by making it shorter in edit. Link to comment
TomBatch Posted March 17, 2023 Author Share Posted March 17, 2023 Hey Ziggy, I hope you are well? I'm still trying to find a solution for this if you have one? At the moment I'm happy with how the image looks on mobile, however I would like the ratio on desktop to be 2:1. 🙂 Link to comment
Ziggy Posted March 17, 2023 Share Posted March 17, 2023 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
TomBatch Posted March 28, 2023 Author Share Posted March 28, 2023 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
TomBatch Posted March 30, 2023 Author Share Posted March 30, 2023 Managed to sort it with this code 🙂 Thanks though mate. @media screen and (min-width:641px) { div#block-yui_3_17_2_1_1666910696019_17181 .content-fill { padding-bottom: 50% !important; } } tuanphan and Ziggy 2 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment