Jump to content

Excerpts on same line Summary block carousel

Recommended Posts

Hi!

I use events page to list my upcoming concerts, and the put a summary of this on my homepage. The design seems a bit sloppy as the BUY TICKETS link I have made in excerpts for each event end up on different lines according to how much text is in the event title. 

I can of course make the layout uniform by keeping all titles the exact same lenght - but this is not always so easy to accomplish and if the screen/browser window size is smaller the BUY TICKET lines starts jumping further down if the title it long.

Can I apply some CSS to fix this layout issue?

 

site: https://dahlia-chameleon-xdem.squarespace.com/

pass: sketchingsound

image.thumb.png.73597b5ef2661ed5903a550131942590.png

Link to comment
  • Replies 10
  • Views 382
  • Created
  • Last Reply

Top Posters In This Topic

20 minutes ago, sihole said:

Hi!

I use events page to list my upcoming concerts, and the put a summary of this on my homepage. The design seems a bit sloppy as the BUY TICKETS link I have made in excerpts for each event end up on different lines according to how much text is in the event title. 

I can of course make the layout uniform by keeping all titles the exact same lenght - but this is not always so easy to accomplish and if the screen/browser window size is smaller the BUY TICKET lines starts jumping further down if the title it long.

Can I apply some CSS to fix this layout issue?

 

site: https://dahlia-chameleon-xdem.squarespace.com/

pass: sketchingsound

image.thumb.png.73597b5ef2661ed5903a550131942590.png

In smaller display, the description of first item is longer than other so it push the Buy Ticket. 

I can give the code that only show one line only, the remaining characters will be hidden by 3 dots. How do you think?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

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

You can try adding to Home > Design > Custom Css

#block-yui_3_17_2_1_1672640375376_83552 .summary-title a {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  display: block;
}
#block-yui_3_17_2_1_1672640375376_83552 .summary-item:hover .summary-title a {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  display: block;
}

@media only screen and (max-width: 767px) {
  /*Mobile with 2 lines*/
  #block-yui_3_17_2_1_1672640375376_83552 .summary-title a {
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* start showing ellipsis when 2nd line is reached */
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

Edited by Beyondspace
add mobile fixing

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

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

My testing

image.thumb.png.96a7233de07f1234e88410e6bd49f042.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

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

Thanks! This looks quite good, but on mobile devices very little of the info shows with just one line (see attached). Same happens to some extent on smaller web browser windows on computers.

Perhaps make it two lines before the dots "kick in"? But then the ticket link would appear on different lines for titles that actually fits on one line, I guess.

Ideas?

🙂

image.thumb.png.ec14cc73d2873a949571b8e116ee108a.png

Link to comment

Hi again. Any chance to look into this yet? I am quite happy the way it is, but if possible to have two lines before the dots it might be worth a try.

Another question: is it possible to have the arrows appear on either side, centered vertically on the summary carousel block, rather than above to the right as is default?

 

Link to comment
3 hours ago, sihole said:

Hi again. Any chance to look into this yet? I am quite happy the way it is, but if possible to have two lines before the dots it might be worth a try.

Another question: is it possible to have the arrows appear on either side, centered vertically on the summary carousel block, rather than above to the right as is default?

 

You can try my previous code, I have just added the code to set the dot when text reaches 2 lines

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

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

Thanks again! It works really well with the two lines on mobile. However, for events with longer titles / dots, the third line appears really close to the BUY TICKET line... is there a way to fix this? Guess it is not a big issues, but would look even better with the appropriate space in between (screenshot attached)

image.png.bc8cc903a6560a58bc7c75c0cfdc1e7e.png

Link to comment
4 hours ago, sihole said:

Thanks again! It works really well with the two lines on mobile. However, for events with longer titles / dots, the third line appears really close to the BUY TICKET line... is there a way to fix this? Guess it is not a big issues, but would look even better with the appropriate space in between (screenshot attached)

image.png.bc8cc903a6560a58bc7c75c0cfdc1e7e.png

It seems that you miss this part

image.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

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

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.