sihole Posted January 9 Share Posted January 9 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 Link to comment
Beyondspace Posted January 9 Share Posted January 9 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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Beyondspace Posted January 9 Share Posted January 9 (edited) 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 January 12 by Beyondspace add mobile fixing BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Beyondspace Posted January 9 Share Posted January 9 My testing BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
sihole Posted January 9 Author Share Posted January 9 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? 🙂 Link to comment
sihole Posted January 12 Author Share Posted January 12 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
Beyondspace Posted January 12 Share Posted January 12 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 format) 💫 Animated Buttons (Referral URL) 🥳 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
sihole Posted January 13 Author Share Posted January 13 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) Link to comment
Beyondspace Posted January 13 Share Posted January 13 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
sihole Posted January 15 Author Share Posted January 15 Aha - now it works perfectly. Thank you so much for your help! Best, Sigurd Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment