Anthony_Richardson Posted April 22, 2020 Share Posted April 22, 2020 Hi everyone, I'm curious to know if somebody has any coding ideas to achieve a similar look as the attached? Ignoring the background colour, I guess I'm seeing if it's possible to make it so the thumbnail images align (I typically use differing image ratios and don't plan on changing this) in height, and then the metadata and heading aligns. Thanks Link to comment
tuanphan Posted April 22, 2020 Share Posted April 22, 2020 Can you share link to page in screenshot? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Anthony_Richardson Posted April 22, 2020 Author Share Posted April 22, 2020 48 minutes ago, tuanphan said: Can you share link to page in screenshot? https://thedesignfiles.net/2020/04/architecture-the-summit/ it's down the bottom the page Link to comment
tuanphan Posted April 22, 2020 Share Posted April 22, 2020 7 hours ago, Anthony_Richardson said: https://thedesignfiles.net/2020/04/architecture-the-summit/ it's down the bottom the page I guess you need to use some CSS to do this. Difficult to help without checking your summary block on your site Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Anthony_Richardson Posted April 23, 2020 Author Share Posted April 23, 2020 18 hours ago, tuanphan said: I guess you need to use some CSS to do this. Difficult to help without checking your summary block on your site Well my website is www.thedesignemotive.com but I'm hoping for something that won't require CSS for individual collection IDs, given it'll be on (eventually) hundreds of pages, so having hundreds of individualised codes won't be practical. Link to comment
tuanphan Posted April 23, 2020 Share Posted April 23, 2020 5 hours ago, Anthony_Richardson said: Well my website is www.thedesignemotive.com but I'm hoping for something that won't require CSS for individual collection IDs, given it'll be on (eventually) hundreds of pages, so having hundreds of individualised codes won't be practical. My idea is set max-height for images. But not sure it will look nice? Add this to Home > Design > Custom CSS @media screen and (max-width:767px) { .summary-item img { max-height: 150px; width: auto !important; } .summary-item .summary-thumbnail-outer-container { overflow: hidden; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Anthony_Richardson Posted April 28, 2020 Author Share Posted April 28, 2020 On 4/23/2020 at 11:02 PM, tuanphan said: My idea is set max-height for images. But not sure it will look nice? Add this to Home > Design > Custom CSS @media screen and (max-width:767px) { .summary-item img { max-height: 150px; width: auto !important; } .summary-item .summary-thumbnail-outer-container { overflow: hidden; } } Didn't quite achieve the look, the text section hasn't resized to the image. I appreciate it though, I don't think it's something that can be easily achieved in Squarespace. I might just play around with it and see what happens. If I wanted to apply it to certain pages, how do I begin and end the code in the page header injection? Link to comment
tuanphan Posted April 29, 2020 Share Posted April 29, 2020 3 hours ago, Anthony_Richardson said: Didn't quite achieve the look, the text section hasn't resized to the image. I appreciate it though, I don't think it's something that can be easily achieved in Squarespace. I might just play around with it and see what happens. If I wanted to apply it to certain pages, how do I begin and end the code in the page header injection? <style> @media screen and (max-width:767px) { .summary-item img { max-height: 150px; width: auto !important; } .summary-item .summary-thumbnail-outer-container { overflow: hidden; } } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.