I have this heading in my portfolio. It breaks to a new line because the title is wider than its parent’s max width.
Unfortunately for some reason the text element spans the full width, which means that my arrow icon (only shows on hover) is all the way on the right, rather than being next to the text like all my other headings.
How can I fix this?
Here is my site Read-Only: LINK
Max width on the text?
Unfortunately the text already has a max-width, that’s what is causing the “Notification Escalation” to wrap over two lines.
Since these are CMS items, I can’t go and set an arbitrary max-width efficiently for each title. There is actually a heading just below that just barely fits my current max-width, so changing it would just move the problem elsewhere.
Hi @peej there is no natural CSS way to style only one element in CMS collection, here is simple code that allow you to achieve your design.
const menuItems = [...document.querySelectorAll(".folio-home-heading")]
menuItems[0].style.inlineSize = "min-content";
Hope that will work for you
Thank you so much, this was exactly what I was looking for!