Jump to content

Testimonial blocks in 7.1 - CSS for side-by-side?

Go to solution Solved by Lesum,

Recommended Posts

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;

Screenshot 2023-09-15 at 2.38.42 PM.png

Edited by aimeec
add more information
Link to comment
  • Replies 3
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution

@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. 

Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.