How to center the text inside next/back button | Experience Community
Skip to main content
Solved

How to center the text inside next/back button

  • October 2, 2020
  • 1 reply
  • 99 views
M
Forum|alt.badge.img+1

Hi,
I have the back and next button in my survey. In the desktop version of the survey, the text looks centered, but in the mobile version, it is not centered and it looks cutoff.
Screen Shot 2020-10-01 at 5.12.34 PM.pngDoes anyone know how to fix the style so that the text in centered also in mobile?

Best answer by Tom_1842

Hi there, if you still need, do you have CSS in place already? I wasn't able to reproduce where the text is right aligned on mobile, but you can change the button styling by using/modifying the below CSS. Try adding the below CSS to the Style section of the survey's Look & Feel:
.Skin #Buttons #NextButton, .Skin #Buttons #PreviousButton {
text-align: center !important;
padding: 0px !important;
width: 45% !important;
height: 35px !important;
border-radius: 30px !important;
}

.Skin #Buttons #NextButton {
background-color: orange !important;
}

.Skin #Buttons #PreviousButton {
background-color: white !important;
color: black !important;
border: 1px solid black !important;
}
ButtonStyling.png

    1 reply

    Tom_1842
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+28
    • Tom_1842
    • Level 8 ●●●●●●●●
    • Answer
    • November 17, 2022

    Hi there, if you still need, do you have CSS in place already? I wasn't able to reproduce where the text is right aligned on mobile, but you can change the button styling by using/modifying the below CSS. Try adding the below CSS to the Style section of the survey's Look & Feel:
    .Skin #Buttons #NextButton, .Skin #Buttons #PreviousButton {
    text-align: center !important;
    padding: 0px !important;
    width: 45% !important;
    height: 35px !important;
    border-radius: 30px !important;
    }

    .Skin #Buttons #NextButton {
    background-color: orange !important;
    }

    .Skin #Buttons #PreviousButton {
    background-color: white !important;
    color: black !important;
    border: 1px solid black !important;
    }
    ButtonStyling.png

    Terms & ConditionsAccessibility statement