Unable to wrap text in sidebar

[kevinwenning]

I have a layout with featured links in the left sidebar and this appears on most pages throughout the site. The sidebar appears to be automatically hidden on small and XS screens. I do however want it to appear on Med, LG and XL screens. The sidebar itself does resize but on smaller screens the text inside wraps onto the same line instead of being responsive and wrapping onto the next line. I created the featured links list in a global block using the standard Text element, and then put the block into the sidebar widget. I can’t find a setting anywhere to wrap these lines properly when the sidebar width is reduced. How can I get those links to wrap onto the next line when the sidebar width is reduced?

[nabeel]

Hi @kevinwenning,

Thank you for reaching out to us. I checked your setup and the Line Height given to your Text element is causing the issue. Please inspect your Text elements and increase the Line Height to fix the issue (see screenshot)

Hope this helps!

[kevinwenning]

Hmm, well; it does kind of work but that creates a lot of spacing between items which doesn’t look great and pushes the list below the fold on landscape screens.

I know using <p> to make a list of items isn’t ideal but I haven’t found a way to hide bullets or numbers preceding the text in an ordered list. I tried this css I found in another forum answer but it didn’t have any effect.

.x-feature-list .x-feature-box:before,
.x-feature-list:before  {
    display: none;
}

[marc_a]

Hi @kevinwenning,

To remove the bullet or number in an ordered list, please add this code in your X > Theme Options > CSS.

.x-sidebar ul, .x-sidebar ol {
     list-style-type: none;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer.

Hope that helps.

Thank you.