I would like to set max line for the testimonial section of my draft website - I have no experience with code at all so appreciate all help

The testimonials section uses an auto layout and I understand that a "read more" button is not possible.

Therefore, I would like to limit the number of lines that appear on the testimonials section of my website. (8-9 lines max)

Can you help please? 

Website: https://mouse-snail-xcg2.squarespace.com/config/

Password to my site is: @Nnie2023!

Many thanks
Maeve

Hey!

For the testimonial section, you can have "read more" by using an accordion block for the drop down function of read more...

On 9/25/2023 at 8:40 PM, Maeveoflaherty said:

 

The testimonials section uses an auto layout and I understand that a "read more" button is not possible.

Therefore, I would like to limit the number of lines that appear on the testimonials section of my website. (8-9 lines max)

Can you help please? 

Website: https://mouse-snail-xcg2.squarespace.com/config/

Password to my site is: @Nnie2023!

Many thanks
Maeve

You can use this CSS code (Website > Website Tools > Custom CSS)

body.homepage h2.list-item-content__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
}

Thanks @tuanphan - I tried that code however there is no option to then expand the text. 

Hi @DPruitt - thanks for your suggestion

I tested out the accordion block which I didn't know about so thanks.

Am I right in saying however that with this option, all of the text has to be fully hidden?

Thanks again

With the accordion, you can first create a text block for the first part of the visible text, then drop in the accordion block below it with "Read More" as a title, with the description containing the remaining text...

If you're trying to do it within the carousel, you would need HTML within the description, Javascript for the "read more" button along with CSS to style it visually.  I've written this for a few clients, however, you do have to add HTML to the content description which some people don't like doing.  For example <h4>Read More...</h4> would be added to the description field.

Hi @DPruitt

Firstly apologies for my delayed thanks for your advice above. 

I took your advice and used the accordion block within a text block to hide the overflow text. 

In my opinion it might look a bit messy when a site visitor clicks on the arrow to expand the full text as there is a gap and then also it doesn't seem possible to format the text so it is justified (which I had done with the first few lines) 

I have left the existing carousel layout on my draft website - in your opinion, which is more appealing on the eye, or is it more personal preference? 

Thanks very much again for your time & help

Maeve

Hey Maeve!
You can use CSS to adjust the accordion visually... Much like we would for the carousel.

Either approach would work; both will require CSS to make it visually appealing.

Thanks @DPruitt

For someone who has no knowledge or experience with CSS - do I have to hire a squarespace expert to do this? Thanks again 
Maeve

I could probably work with you one-on-one.

Feel free to invite me into your site: derek@derekpruitt.design