Scale rating on mobile view

Good day,

What is the correct mobile format / CSS code for the scale rating feature? I would like the scale rating feature to fit the screen on mobile.

Here is the link to the form: https://www.jotform.com/build/210391173520041.

Thanks.

Hi JJlegrange,

I have checked your form and it fits perfectly on a mobile view.

I tried it on mobiletest.me and it looks great as well.

Kindly check and let us know if the issue persists.

Hi, I need the numbers from 0 - 10 to be on the same line. Is that possible? Thanks for the feedback.

Hi there,

Please try injecting the following CSS in your form.

.rating-item-group, li[data-type=control_scale] .form-sub-label-container {

    display: flex;

    flex-wrap: nowrap;

    width: 54% !important;

}

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

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

    display: flex;

    width: 1.33333em;

}}

Related Guide:

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Let us know if you need further assistance.

Thanks

Thanks, is there a reason why it looks squashed?

We apologize for inconvenience. I was able to see the issue as well when check/test using mobile browser.

The custom injected CSS codes needs to be updated. Allow me some more time to check. I will get back to this shortly.

Hi,

I'm still waiting for feedback?

Regards,

Hi,

Let me contact my colleague for an update. We will get back to you as soon as we have more information.

Thank you.

Hi,

Do you have an answer? I need it to be done asap please.

Greetings,

Kindly inject the following CSS code in your Form Design

.rating-item-group, li[data-type=control_scale] .form-sub-label-container {

    display: flex;

    flex-wrap: nowrap;

    width: 54% !important;

}

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

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

    display: flex;

    width: 1.33333em;

    height:1.33333em;

    transform : scale(1,1) !important;

} 

}

You can change the width and height according to your needs.

Related Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Let us know if you need further assistance.

Thank you. Regards.

Hi, thanks. That's a screenshot from my mobile, I need the scale to fit the whole screen without it looking squashed.

Which mobile device you are using, and what is the screen size? I did check your form in the mobile device, and it seems to display the fields correctly.

I would suggest you to please update the injected CSS code with the following custom CSS code and see if it displays the field correctly:

@media screen and (max-width: 600px)

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

  display: flex;

  width: 1.33333em;

  height: 1.33333em;

  transform: scale(1,1) !important;

  margin-right: 4px !important;

}

Do get back to us if the issue persists.

We will wait for your response.

Hi, I'm using a Samsung A51. Tested it on an iPhone XR and it displays the same way.

It needs to look like in the image above, it must just not look squashed.

Hi there,

The code provided by my colleague required a minor fix. Please check the form on your mobile device now and let us know if you need further assistance.

Thanks

Hi,

It's fine, thanks.