Erlend-fs Posted March 9, 2021 Share Posted March 9, 2021 (edited) Site URL: https://spinach-keyboard-w7ws.squarespace.com/parallell-forum Hello! Is it possible to use the CSS "object fit" command (or similar) in Squarespace? I would like to have the images on this page in landscape mode (wide) on desktop, but cropped into portrait or square ratio on mobile. There reason I want this, is that the images works best in landscape mode (wide) on desktop, but they gets too small on mobile. - The first attached image is how it looks on desktop. And I'm happy with this. - The second attached image is how it looks on mobile. I'm not happy with this. - The third attached image is how I would like it to be on mobile (cropped) I will be very happy if this is possible! Edited March 9, 2021 by Erlend-fs Beyondspace 1 Link to comment
Beyondspace Posted March 9, 2021 Share Posted March 9, 2021 12 minutes ago, Erlend-fs said: Site URL: https://spinach-keyboard-w7ws.squarespace.com/parallell Hello! Is it possible to use the CSS "object fit" command (or similar) in Squarespace? I would like to have the images on this page in landscape mode (wide) on desktop, but cropped into portrait or square ratio on mobile. There reason I want this, is that the images works best in landscape mode (wide) on desktop, but they gets too small on mobile. - The first attached image is how it looks on desktop. And I'm happy with this. - The second attached image is how it looks on mobile. I'm not happy with this. - The third attached image is how I would like it to be on mobile (cropped) I will be very happy if this is possible! I saw it scale well here, did you got it solved Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Erlend-fs Posted March 9, 2021 Author Share Posted March 9, 2021 Hello bangank, and thank you for your reply. While waiting, I made a copy of the site, where I uploaded images in another aspect ratio (that will fit better on mobile - but not on desktop) So my question still exists, but you can use this link instead: https://spinach-keyboard-w7ws.squarespace.com/parallell-forum Beyondspace 1 Link to comment
Beyondspace Posted March 9, 2021 Share Posted March 9, 2021 3 minutes ago, Erlend-fs said: Hello bangank, and thank you for your reply. While waiting, I made a copy of the site, where I uploaded images in another aspect ratio (that will fit better on mobile - but not on desktop) So my question still exists, but you can use this link instead: https://spinach-keyboard-w7ws.squarespace.com/parallell-forum So object-fit is available (it's a css property), but the actually height of the image is controlled by the it's padding-bottom attribute (based on the image original dimension, so you can override it on mobile like so. There are several approach I would like to show so others with same issue can follow You can use this extension to detect the unique id of each section/block Squarespace ID Finder - Chrome Web Store (google.com) For invidual image block set up, /* image 1*/ #block-bd1b866d38f16845c425 .image-block-wrapper { padding-bottom: 150% !important; } #block-bd1b866d38f16845c425 .image-block-wrapper img { object-fit: cover; } /* image 2*/ #block-ed0ac70d30acf00817a0 .image-block-wrapper { padding-bottom: 150% !important; } #block-ed0ac70d30acf00817a0 .image-block-wrapper img { object-fit: cover; } To change the whole section's image section[data-section-id="6047732cb406206d363532ab"] .image-block-wrapper { padding-bottom: 150% !important; } section[data-section-id="6047732cb406206d363532ab"] .image-block-wrapper img { object-fit: cover; } To change the whole's page image #collection-6047732cb406206d363532a5 .image-block-wrapper { padding-bottom: 150% !important; } #collection-6047732cb406206d363532a5 .image-block-wrapper img { object-fit: cover; } To apply site-wide image .image-block-wrapper { padding-bottom: 150% !important; } .image-block-wrapper img { object-fit: cover; } tuanphan 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Erlend-fs Posted March 12, 2021 Author Share Posted March 12, 2021 Thanks a lot bangank! Beyondspace and tuanphan 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