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
  • 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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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.