NidhiG Posted October 11, 2022 Share Posted October 11, 2022 (edited) Site URL: https://sheto-test.squarespace.com/ Hi On my site: https://sheto-test.squarespace.com/ I am looking for my quote block to look like this. Additionally, I will have 3 quote blocks next to each other. I'd like the height of all of them to be the same. Any help would be much appreciated! Thanks Nidhi Edited October 12, 2022 by NidhiG Link to comment
Beyondspace Posted October 12, 2022 Share Posted October 12, 2022 21 hours ago, NidhiG said: Site URL: https://sheto-test.squarespace.com/ Hi On my site: https://sheto-test.squarespace.com/ I am looking for my quote block to look like this. Additionally, I will have 3 quote blocks next to each other. I'd like the height of all of them to be the same. Any help would be much appreciated! Thanks Nidhi Do you mean something like this? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted October 12, 2022 Share Posted October 12, 2022 You can try the following css code section[data-section-id="633b2a1e0870473ef76d3530"] blockquote:before { content: ''; display: block; width: 100%; height: 20px; background-image: url('https://css-tricks.com/examples/Blockquotes/images/examplequote.gif'); background-repeat: no-repeat; background-size: contain; background-position: center center; transform: rotate(180deg); } Change the url image so it can match you requirement NidhiG 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
NidhiG Posted October 12, 2022 Author Share Posted October 12, 2022 (edited) Thank you @bangank36! That worked beautifully. I also want the quote source to be displayed above the quote and in multiple lines (as in the image). Basically the order would be: Quote Source Name (centered, black color) Quote Source Title (centered, blue color text) quotation marks (centered) Then quote (left aligned, padded) And then a little line (centered) Can you please help with this too? Thanks a mill! Edited October 12, 2022 by NidhiG Link to comment
NidhiG Posted October 12, 2022 Author Share Posted October 12, 2022 @bangank36 I was able to make most of the formatting changes. See attached. If I can get help with the order of quote source; quotation mark and actual quote, that would be phenomenal! These are the pieces that are left: Order: Quote Source Name (color black) Quote Source Title (color blue) quotation marks Then quote. Thanks Nidhi Link to comment
tuanphan Posted October 15, 2022 Share Posted October 15, 2022 On 10/13/2022 at 6:07 AM, NidhiG said: I was able to make most of the formatting changes. See attached. If I can get help with the order of quote source; quotation mark and actual quote, that would be phenomenal! These are the pieces that are left: Order: Quote Source Name (color black) Quote Source Title (color blue) quotation marks Then quote. Thanks Nidhi Can you check site url? It doesn't exist Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
NidhiG Posted October 17, 2022 Author Share Posted October 17, 2022 @tuanphan please use https://www.sheto.org/ Link to comment
tuanphan Posted October 22, 2022 Share Posted October 22, 2022 On 10/18/2022 at 2:39 AM, NidhiG said: @tuanphan please use https://www.sheto.org/ Thank you. Try adding this to Design > Custom CSS body.homepage .quote-block figure { display: flex; flex-direction: column-reverse; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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