Hello!
I recommend making the font size smaller or applying text-wrap: balance if the builder allows this (https://developer.chrome.com/docs/css-ui/css-text-wrap-balance).
If you provide me with the URL of the affected page, I can offer more detailed guidance.
Hey Sybre, I appreciate the quick response. I tried to figure out the text-wrap:balance but was not able to accomplish much with that to fix the issue.
Still working on the website but opened it up for you to take a look here
https://questiontravel.com/portugal/portimao/the-beauty-of-the-soematra-forest-stories/
A fix would be very appreciated to ensure breadcrumbs can be used and displayed nicely.
Howdy!
Thank you for the URL. I think I came up with something good.
For your site, I recommend adding the following CSS. It transforms the breadcrumbs into flexboxes so that each crumb’s entire text can break/wrap to the next row.
I also removed the extraneous padding from the theme styles. I didn’t consider padding to be used instead of margins for list elements.
nav.breadcrumbs ol {
display: flex;
flex: 1 1 auto;
flex-flow: row wrap;
justify-content: center;
padding-inline-start: 0;
}
Also, because the current page title is displayed right above the breadcrumb title, I think it’s best to hide it.
nav.breadcrumbs ol li:last-of-type,
nav.breadcrumbs ol li:nth-last-child(2):after {
display: none;
}
I hope you like it! Cheers 🙂
Hey Sybre,
You are awesome – I appreciate the in depth assistance here.
Though this didn’t seem to fix the issue, it kind of just shoved everything over to the left on mobile.
It did seem to work if I add the 2nd part to remove the page title, but only if it is small enough to fit on one line. As soon as it breaks into 2 lines on mobile it gets shoved off to the left.
Screenshot: https://ibb.co/XDpZGMc
Left the site live too so you can see it with the code applied.
Hi again!
To me, it appears that the code isn’t applied at all. Have you tried flushing the caches?
Be sure to add both CSS snippets I shared in my last reply for the full effect.
-
This reply was modified 2 years, 2 months ago by
Sybre Waaijer. Reason: More info
Hi there,
Yes, I have cleared the cache and the code is applied. It does everything expected except center the text on mobile, it instead moves it to the left.
Hello!
I see that TSF’s original CSS is added after the modifications, creating specificity issues and rendering their centering ineffective.
I cannot tell what’s happening precisely because a plugin extracts all the CSS and dumps it into the header, indiscriminately of context and scope. Such optimizations create weird bugs, and it was probably why the first attempt at adding the CSS didn’t appear to work: layered optimizations create caching issues.
In any case, here’s the updated CSS to mitigate the specificity issue, specifically for Elementor’s shortcode element and shortcode [tsf_breadcrumb class="breadcrumbs"]:
.elementor-shortcode nav.breadcrumbs ol {
display: flex;
flex: 1 1 auto;
flex-flow: row wrap;
justify-content: center;
padding-inline-start: 0;
}
nav.breadcrumbs ol li:last-of-type,
nav.breadcrumbs ol li:nth-last-child(2):after {
display: none;
}
Remember to flush your site’s caches after updating the snippet. Let me know if this resolves the issue. Cheers!
Hello again,
Thank you for your efforts here, sincerely appreciated.
The new code did not work at first but your point about a plugin led me to investigate further whether my caching plugin (WP Rocket) was for some reason causing a conflict, despite the cache being fully flushed each time.
I deactivated the plugin fully and activated one setting at a time to try and determine the cause. I ended up back to my original settings and the code continued to work this time around. Odd situation but it works now!
Thank you again.
