My mobile layout looks bad

I am creating a basic survey form. The preview indicates that the mobile layout is horrible. Specifically, I need help resizing the heading so it doesn't have line breaks in the middle of words and I need to reduce the size of the scale so it can fit on one line. Can you provide very specific, detailed instructions on how to update the CSS code to fix this? I am not a technical expert so I need really basic instructions.


This shows how the heading is way too big and is breaking across words. I have tried using the 'small' font size but that does not seem to have any efffect.

This shows how the scale is too big and is taking up multiple lines. All five options should fit across the screen horizontally. The margins look huge.

Hi ericmolho, 

Thanks for reaching out to Jotform Support. You can easily adjust the rating scales and headers by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

@media only screen and (max-width: 480px) {

.form-all {

  padding: 0 !important;

}

.rating-item, .rating-item>label {

  display: flex;

  width: 2.65em;

  height: 2.65em;

  transform: scale(1.1) !important;

   margin-right: 1px !important;

}

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Take a look at the screenshot below to see how it works:Give it a try and let us know how it goes.