aimeec Posted September 15, 2023 Share Posted September 15, 2023 (edited) I'm running into a wall in customizing a testimonial page section to show the testimonial and image side-by-side instead of stacked on top of each other. I've managed the CSS to bring the fonts into alignment with what I want, but the layout eludes me. Here's what I have so far, and I'm guessing it's pretty obvious what I'm hoping to achieve from the screenshot — I want the text and attribution to be next to (not under) the photo, and for the arrows to move up accordingly as well. Thank you in advance for any help...I've been banging my head against a wall on this for hours! The site's not public yet, but find it here, with the password "thankyou". Here's the CSS that I currently have applied here: //* Testimonials *// .user-items-list-item-container[data-section-id="65049c0c0b06d04fea685eb9"] { /* quote text */ h2.list-item-content__title { font-size: 30px !important; line-height: 2.2rem; font-weight: 300; } /* attribution */ .list-item-content__description * { font-family: brandon-grotesque; font-weight: 600; font-size: .93rem; letter-spacing: 0.07em; font-color: #282828; text-transform: uppercase !important; } } Edited September 15, 2023 by aimeec add more information Link to comment
Lesum Posted September 15, 2023 Share Posted September 15, 2023 @aimeec Would it be possible to share your site URL so I can take a look? Thanks! If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
aimeec Posted September 15, 2023 Author Share Posted September 15, 2023 Thank you, Sam! Sorry, I thought I had included that but it didn't stick. Edited to add above in the main post! Link to comment
Solution Lesum Posted September 15, 2023 Solution Share Posted September 15, 2023 @aimeec You can add this code snippet under Custom CSS panel: .user-items-list-carousel[data-alignment-vertical="middle"] .user-items-list-carousel__slide { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-gap: 5vw !important; } After adding the code, you'll need to adjust the width of the image and the text container under the Design > Size & Space settings for the carousel. Currently, the image width is set to 38%, and the text container width is set to 47%. If the code isn't displaying the outcome, please reload your Squarespace editor. Thanks! If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? 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