Custom Styling on Feedback widget help

0
I have been struggling with changing the styling of the feedback widget.  Instead of the current design I want it to just be a button that says “Feedback” that is vertically aligned.  This is what I have so far, but my text is sort of funky and so I was wondering if anyone could assist. I cant get the text to align vertically and I want the entire button to be black with white text. .sprintrFeedback__sidebar_button--feedback {   background-image: none; } .sprintrFeedback__sidebar_button {   height: auto;   padding: 0px; } .sprintrFeedback__sidebar_button:last-child:after {   display: block; } .sprintrFeedback__sidebar_button:after {     content: "F e e d b a c k";     color: white;     position: initial;     height: auto;     background: black; } Thanks!
asked
3 answers
1

I tried this and it worked for me:

.sprintrFeedback__sidebar_button:after {
      content: "F e e d b a c \A k";
      white-space: pre-wrap;
}

You could also rotate the content without the spaces like this:

.sprintrFeedback__sidebar_button:after {
   content: "Feedback";
   transform: rotate(90deg);
}

With a little changes to the heights/widths and backround I managed to make it look like this:
 

Hope this helps!

answered
0

Have you tried to add an extra space to your content:

“F e e d b a c k ”

This just might get the c and k on a separate line.

answered
0

You could use

.sprintrFeedback__sidebar_button:after {
    content: "F e e d b a c k";
    word-break: break-all;
}

and setting width to 1em. This will make the word be split into each seperate letter (https://css-tricks.com/almanac/properties/w/word-break/). However, my experience is that word-breaks never seem to do exactly what you want, so if any of the above answers works for you, use those.

Cheers

answered