Large headline and overflowing accordion header on XS Breakpoints

Support
#1

Hello

Please have a look at this page under XS breakpoints.
As you can see on the image attached below, the heading and subtitle are not reducing when the XS breakpoint is triggered, instead they are overflowing out of their the header bar.
Also, I would like the accordion head to wrap in next line and not just continue out of the screen when smaller breakpoints are triggered. How can I do so?

Thanks!

#2

Hello @ngrhd,

Thanks for writing in! Please be advised that when your set a fixed font size to your header, the font size will be applied through all of the screens sizes. Most of the time, when the screen gets smaller, the text will go into the next line. When the word is long enough, sometimes it will overflow the content area which is what is happening now. To resolve this, you may apply responsive typography. Please go to X/Pro > Theme Options > Typography and apply “Stepped” or “Scaling” Typography. The font size for smaller screen should also be smaller of at least 12 or 14 px. Please check out this documentation:

Or check out more detailed explanation about the theme’s responsive typography feature:

#3

Thank you!

I was able to correct the headline BUT Accordion headers. I request you to refer the website and screenshot as attached in my first post. If the page is viewed on a small device, the headers of all accordion items don’t wrap and come to next line, instead it shows three-dots. This sort of behavior is not correct as the mobile viewers are unable to see the rest of the sentence and the FAQ question being asked. The accordion body does wrap to the next line however the accordion header which contains the question ends just with 3-dots.

How can I make them wrap to the next line?

Thank you.

#4

Hello @ngrhd,

By default, the accordion item titles were truncated. To display the full title, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-acc .x-acc-header-text {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

We would love to know if this has worked for you. Thank you.

#5

Hello!

I saved this under Global CSS, however, they still continue to truncate under small breakpoints.

#6

Hey @ngrhd,

I have updated the css code into this:

body .x-acc .x-acc-header-text {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

Please clear your phone browser’s cache or use private browsing mode and test your site again.

#7

Thank you! This works. Just a small suggestion to add a little switch to achieve this behaviour under Cornerstone in the next update.

Regards.

#8

Hey @ngrhd,

You don’t need CSS for this because there’s the Overflow option in Accordion > Header.

Hope that helps.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.