Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Level Format

Hey guys,

is there an opportunity to break levels into two lines just for screening section?

Example:
 - Label: Product Category -> Level: Entertainment

In Screening Section it should be displayed as "Enter-tain-ment" about 3 lines. But in Unacceptables the respondents should read the full word "Entertainment"

Same again with media screen max width 800px, media screen should always contain this line break and desktop screen not.

Any ideas to solve this problem?
asked Jan 25 by Honeybadger Bronze (890 points)
The "overflow-wrap" CSS rule might be of interest to you:

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
Should I insert this rule to the list members or to every single question where it should happen?
Whether you want to add it as inline CSS for each list member or as a rule to the page is a matter of preference / exact requirements for the page.
I don't get it... I just want to break this word in mobile view, so I do the following steps

1) List member from Entertainment to
<div class="break">Entertainment</div>


2) Insert the following code in the screening section
<style>
.break {
   overflow-wrap: break-word;
}
</style>


But there is no change in display..
If the label is only one word, I imagine it can display normally on even very narrow screens.  You want it to wrap even when it is not required for the page to display?
yeah, because otherwise respondents have to scroll vertically through concepts and with a wrap every concept will be seen without scrolling

1 Answer

0 votes
Perhaps you would be interested in explicitly defining desktop and mobile texts for these list items:

<span class="desktop">
    Desktop text
</span>
<span class="mobile">
    Mobile text
</span>


(Setting an internal label for these items may be helpful for future analysis.)

Then we could apply CSS like this to the page to show only one of the texts:

<style>
@media screen and (max-width: 800px) {
    .desktop {
        display: none;
    }
}

@media screen and (min-width: 801px) {
    .mobile {
        display: none;
    }
}
</style>
answered Jan 25 by Zachary Platinum Sawtooth Software, Inc. (201,975 points)
Sorry, I just tried to introduce an easier matter.. but unacceptable section as well should be a one liner
Only screening in mobile and calibration in mobile have to get a wrap
Just include the lines 9-11 part of the CSS on those pages.
Perfect! You are great!!
...