Excerpts on same line Summary block carousel

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

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

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?

Thanks - let´s give it a try!

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

My testing

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?

🙂

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?

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

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)

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)

It seems that you miss this part

Aha - now it works perfectly. Thank you so much for your help!

Best,

Sigurd