LaurenZA Posted September 11, 2020 Share Posted September 11, 2020 (edited) Site URL: https://flashactsfestival.org/ Hi Everyone! I'm working on this specific page: https://flashactsfestival.org/gorn-galaxy PW: FAF2020 I want to adjust the percentage of horizontal space the image takes up compared to the text. Ideally, instead of 50%, I would like the image to take up 30%. I feel like this used to be a feature in 7.0? But now I cannot find it in either 7.0 or 7.1. Hoping someone can help me with the CSS for this. Thank you! Lauren Edited September 11, 2020 by LaurenZA better title Link to comment
Solution tuanphan Posted September 12, 2020 Solution Share Posted September 12, 2020 Add to Page Settings > Advanced > Header <style> @media screen and (min-width:768px) { .design-layout-card .intrinsic { width: 30% !important; } } </style> Chele and StoriesAroundTheSun 1 1 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
lizmak Posted October 4, 2020 Share Posted October 4, 2020 On 9/12/2020 at 11:02 AM, tuanphan said: Add to Page Settings > Advanced > Header <style> @media screen and (min-width:768px) { .design-layout-card .intrinsic { width: 30% !important; } } </style> @tuanphan, I used this code in the Custom CSS section with the specific block image ID— is there a line I can add to make the image centered in its "column"? Right now the image is at 30% width, but it's aligning to the right, like in the screenshot. I would like to make it so that the image is smaller and that both text and image are centered within the image card block, would you be able to help? Link to comment
tuanphan Posted October 5, 2020 Share Posted October 5, 2020 10 hours ago, lizmak said: @tuanphan, I used this code in the Custom CSS section with the specific block image ID— is there a line I can add to make the image centered in its "column"? Right now the image is at 30% width, but it's aligning to the right, like in the screenshot. I would like to make it so that the image is smaller and that both text and image are centered within the image card block, would you be able to help? try margin: 0 auto !important; Chele 1 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
lizmak Posted October 5, 2020 Share Posted October 5, 2020 Thank you @tuanphan! It works perfectly. Do you know the attribute for the text portion of the card block? I would like to change its width as well. Link to comment
tuanphan Posted October 6, 2020 Share Posted October 6, 2020 On 10/5/2020 at 9:10 PM, lizmak said: Thank you @tuanphan! It works perfectly. Do you know the attribute for the text portion of the card block? I would like to change its width as well. Can you share site url? We can check easier. 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
lizmak Posted October 12, 2020 Share Posted October 12, 2020 On 10/6/2020 at 7:07 PM, tuanphan said: Can you share site url? We can check easier. it's https://lizmak.io/intl-sos-assistance-app/ and the password is mizupizu. I'd like to make it so that the name of the organization (Intl SOS) appears on one line. Link to comment
tuanphan Posted October 13, 2020 Share Posted October 13, 2020 19 hours ago, lizmak said: it's https://lizmak.io/intl-sos-assistance-app/ and the password is mizupizu. I'd like to make it so that the name of the organization (Intl SOS) appears on one line. Add to Page Settings > Advanced > Header <style> @media screen and (min-width:768px) { .design-layout-card figcaption.image-card-wrapper { width: 70% !important; } } </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
Leanie Posted November 30, 2021 Share Posted November 30, 2021 @tuanphan I have implemented this code but now my text width seems to be very small, I would like it to extend a bit further on the page. Screenshot attached for reference //LOCATION SOLUTION CARDS// [data-section-id="61a39fe6dfd0aa67845aaf2d"]{ @media screen and (min-width:768px){ .design-layout-card .intrinsic { width: 10% !important; } } } @media screen and (min-width:768px){ .image-card.sqs-dynamic-text-container { width: 90% !important; position: relative !important; left: -50% !important; } } Link to comment
tuanphan Posted December 1, 2021 Share Posted December 1, 2021 20 hours ago, Leanie said: @tuanphan I have implemented this code but now my text width seems to be very small, I would like it to extend a bit further on the page. Screenshot attached for reference //LOCATION SOLUTION CARDS// [data-section-id="61a39fe6dfd0aa67845aaf2d"]{ @media screen and (min-width:768px){ .design-layout-card .intrinsic { width: 10% !important; } } } @media screen and (min-width:768px){ .image-card.sqs-dynamic-text-container { width: 90% !important; position: relative !important; left: -50% !important; } } Can you share link to page in screenshot? We can check easier 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
Leanie Posted December 1, 2021 Share Posted December 1, 2021 @tuanphan see below https://dory-antelope-3w8g.squarespace.com/new-page-1 Link to comment
tuanphan Posted December 4, 2021 Share Posted December 4, 2021 On 12/1/2021 at 9:49 PM, Leanie said: @tuanphan see below https://dory-antelope-3w8g.squarespace.com/new-page-1 Hi. Your site is private. Can you setup password & share url again? 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
Leanie Posted December 5, 2021 Share Posted December 5, 2021 (edited) @tuanphan https://dory-antelope-3w8g.squarespace.com/new-page-1 Password: W172021 Edited December 6, 2021 by Leanie Link to comment
Nick_SquareKicker Posted December 5, 2021 Share Posted December 5, 2021 (edited) @LaurenZA, @lizmak SquareKicker opens up the option to do with natively in Squarespace 7.1 without ever touching a single line of code. See video demo below: Image Card Width.mp4 Note: If you only want SK for this single feature, you can sign up for a single month and cancel and all customisations save forever. You can even save this as a preset on a Pro plan to reuse on Image Card blocks across your site. https://squarekicker.com/features#image Edited December 5, 2021 by NickIppolito Hi, I'm Nick, CEO & Co-Founder at squarekicker.com. Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. Tutorials ● News ● Inspiration ● Features ● FAQS Link to comment
tuanphan Posted December 8, 2021 Share Posted December 8, 2021 (edited) On 12/5/2021 at 10:10 PM, Leanie said: @tuanphan https://dory-antelope-3w8g.squarespace.com/new-page-1 Password: W172021 Don't remove any code in your current code. Add this to Design > Custom CSS @media screen and (min-width:992px) { div#page-section-61a39fe6dfd0aa67845aaf2d figcaption { width: 85%; margin-left: 0 !important; } div#page-section-61a39fe6dfd0aa67845aaf2d figcaption>div { left: unset !important; width: 100% !important; } } Edited December 8, 2021 by tuanphan 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
Create an account or sign in to comment
You need to be a member in order to leave a comment