Hi,
I don’t know why this keeps happening; any suggestions would be welcome! I have these lists of countries and when I view them at different breakpoints, they are breaking in weird places, or not breaking at all. See attached screen capture. These are just words with a space-vertical dash-space between country names, each name linking to its’ corresponding country page.
Thanks.
If no one can help with that, can you possibly tell me a better way to do the above so that it looks correct? I’ve tried using lists instead of a string of text but that doesn’t work how i want either bc in the xs small size you just get a vertical list. agh! Thanks so much.
There are two factors at work here. The first is the width of the containing column and the second is the fact that it’s all one line of text. In terms of it all being one line of text, there is no indication of where the soft line line breaks should occur. Therefore, blocs will just pick what it considers the most appropriate space in the text to make it fit the width of the containing column. Once you start selecting text and creating hyperlinks, the issue seems to worsen (don’t know why) but I usually overcome the problem by using double spaces before and after the pipe character. This tends to keep the wrap towards the end of the column width, rather than apparently breaking the line up too early in a random fashion.
In many respects, it may be preferable to create menus using the menu manager and then inserting the menus into the column. Each Menu would be given the name of the respective continent. You could then insert a navigation into the page and select the appropriate source menu. In my example, I used the “Include Logo” option on the navigation so I could include the region title. This means that the navigation will reduce down to a series of hamburgers at the smallest breakpoint which may be more convenient for mobile users. The screenshots below show how the menus are created and how they display at the various breakpoints.
As @hendon52 points out this can be tricky to get right, and the menu option is good solution.
If I was approaching this, I would use some pseudo classes to add the vertical Bars between countries, you can exclude the last item with the same CSS.
Eg.
<style>
.country:after
{
content: ' |';
padding: 0 3px 0 3px;
color: #000;
}
.country:last-child:after
{
content: '';
}
</style>The result - without any fancy styling…
Blocs_Wrapping_Links.bloc (1.4 MB)
Workaround I figured out before I saw these responses: for some reason, TWO spaces instead of just one on each side of the vertical line worked fine. Thanks!