avanti
-
Posts
9 -
Joined
-
Last visited
avanti's Achievements
-
EarvinChong reacted to a post in a topic:
How to create a table with accordion features.
-
Hi @supasmilez, I put in in CSS
-
This seems to be working for me so far... section[data-section-id="INSERT"]{.product-block .image-container img { object-fit: contain; height: 250px; } }
-
I have the same issue. Has anyone found a solution?
-
Issues with Padding and Margin in Newsletter Form Block
avanti posted a topic in Customize with code
Hi there, My website: www.eyzhn.co In my footer section (on all pages): (1) I would like to make the footer newsletter form button the same height as the form field elements. When "inspecting" my page I am able to do that by adjusting the padding from 1.2rem to 1rem. However when I add this code to CSS nothing happens. .newsletter-form-button { width: 100% !important; padding: 1rem !important; margin: 0px !important; } (2) I would like to fix the margin above and below the "subscribe" and descriptive text so that it aligns with the lists next to it on the left. Here is my custom footer code for reference. /* Hover and active link colour */ footer a {text-decoration: none !important;} section[data-section-id="63384be20590b6496ef20a8a"] a:hover * {color: #6c988d !important;}#block-yui_3_17_2_1_1668132221218_478394 * {padding: 10;} /* Center lists on mobile */ @media screen and (max-width: 640px) {footer p { text-align: center;}} /* Center newsletter title on mobile */ @media screen and (max-width: 640px) {#block-yui_3_17_2_1_1668132221218_478394 * {text-align: center;}} /* Newsletter form input fields */ .newsletter-form-body {input.newsletter-form-field-element {padding: .8rem !important; border-radius: 200px; text-align: center;}} /* Newsletter field & button width */ .newsletter-form-fields-wrapper.form-fields {width: 100% !important; display: block !important;} .newsletter-form-fields-wrapper.form-fields>* {max-width: 100% !important;} .newsletter-form-field-wrapper {width: 100% !important; max-width: 100% !important;} .newsletter-form-button {width: 100% !important; padding: 1rem !important; margin: 0px !important;} /* Newsletter margins */ .newsletter-form-body>div {margin-top: 0 !important;} .newsletter-form-footnote {display: none;} Thanks!
-
Issues with Table when Resizing to Page Width
avanti replied to avanti's topic in Customize with code
Yes, I keep resizing and dragging the section to my liking - for mobile and desktop - but it keeps changing. -
Hi, I created a table to list some information in my Privacy Policy - see clause 1 and clause 14. https://www.eyzhn.co/privacy-policy Occasionally, upon resizing the window, a large blank space appears either above or below both tables. Here is the code: <!DOCTYPE html> <html> <head> <style> table { font-family: europa; color: #223635; border-collapse: collapse; width: 100%; } td, th { border: 0px solid #6c988d; text-align: left; padding: 1px; } a:link, a:visited { color: #ff8e57; cursor: pointer; } a:link:active, a:visited:active { color: #ff8e57; } </style> </head> <body> <table> <tr> <td style="vertical-align: top"><b>Row 1 Column 1</b></td> <td style="width:60%"><b>Row 1 Column 2</b></td> </tr> <tr> <td style="vertical-align: top">Row 2Column 1</td> <td style="width:60%">Row 2 Column 2</td> </tr> <tr> <td style="vertical-align: top">Row 3 Column 1</td> <td style="width:60%">Row 3 Column 2</td> </tr> </table> </body> </html>
-
How to create a table with accordion features.
avanti replied to avanti's topic in Customize with code
Thank you both for your feedback. I figured out how to build the table in HTML but still having some issues with the show/hide function. I tried this workaround but it doesn't seem to support tables or at least I'm not quite sure how to specify where the hidden text starts and ends for each table row. I've had more luck using <details> but have only been able to do one of two things: 1. Clicking on "read more" expands the hidden text within the same cell (and not on a separate and merged table row). 2. Getting the hidden text to expand on a separate and merged row by moving the "read more" text to a new table row. Do I need some JavaScript to get the "read more" button to expand the hidden text along a new full table row? And then hide again once "read less" is selected? <!DOCTYPE html> <html> <table border="1"> <tr> <td>Title 1</td> <td>Price 1</td> <td><details> <summary>Read more 1</summary> Hidden text 1. </details> </td> <td>Buy now 1</td> </tr> <tr> </td> </tr> <tr> <td>Title 2</td> <td>Price 2</td> <td>Read more 2</td> <td>Buy now 2</td> <tr> <td colspan="4"> <details> <summary>Read more 2</summary> <p> Hidden text 2.</p> </details> </td> </tr> </table> </body> </html>
-
Site URL: https://bit.ly/3EmXIWu Hello, is it possible to create a table in Squarespace 7.1 with a collapsible "show details" section underneath, like in the image attached? Sort of like an accordion with extra columns. Thanks
