ClaraB Posted October 23, 2020 Share Posted October 23, 2020 (edited) Hi gang, hopefully someone can help me with this because it feels like I must be overlooking something obvious. I'm trying to add my logo to a page on my website (aside from in the header). But Squarespace keeps cropping the image to "fit" in my "layout." For photography, I can see why this would be a useful feature. But I would much rather my logo scale down than get the words cut off! I know I can just adjust the little crop handlebar to make it fit perfectly on desktop, but there's nowhere I can place it where it works at all screen sizes. In regular HTML, if I place an image on a page and tell it "your width is 100% of the space available", it will scale the height appropriately and preserve the aspect ratio. That's all I want it to do here! I looked at overriding this with CSS in a code block, but it seems squarespace actually adds the image width and height cropping information in an inline style. So that won't work. I could put the <img> tag in a code block, I suppose, but I'm trying to learn to do things "the squarespace way", and I like that with the image block I get access to the other tools (animations, captions, et cetera). I really feel like there must be something I'm not seeing. Help me out! Clara (Edited to add: I just added a "Logo Wall" block to my site to see if maybe that block would reveal the secret settings for "never crop this image, this image is not a photograph, this image is 100% content and cropping it would be a mistake". Except the sample images they uploaded just have a ton of transparent padding, and that's how they've gotten around this problem. Maybe that's what I have to do too? But it seems wildly inefficient!) Edited October 23, 2020 by ClaraB Adding more information Link to comment
ClaraB Posted October 23, 2020 Author Share Posted October 23, 2020 Okay, I think I've got the solution. I changed the Image block type from "Inline" to "Stacked", then added the following custom CSS: .sqs-block-image .image-overlay { opacity: 0; } ... to remove the faint overlay on the image. Seems to be working! But also, still hoping there's a better way to do it haha CorinneC 1 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