Expanding slider length in desktop and mobile.

Using the calculated results slider widget, what is the CSS code to expand the length of the slider on both the desktop and mobile version?

Please try inserting the below CSS code to your Custom CSS field:

iframe#customFieldFrame_276{

      width: 500px!important;

}

iframe#customFieldFrame_274 {

      width: 500px!important;

}

That should make your fields look like this:

You can check my test form as well: https://form.jotform.com/81696114710960

Please let us know if that could work for you or if you need any further adjustments.

Thank you!

That worked for the desktop version, although the mobile version now looks like this: 

What CSS code would I enter to change this?

You can use this CSS:

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

iframe#customFieldFrame_274 {

    margin-left: -33%!important;

}

}

That will move the slider to the left (but only on mobile devices).

I didn't see the other slider in your form now, but the logic is the same as above.

Please try and let us know how it worked.

Thank you!

Thank you very much for your help. The slider was moved to left, although the text answers are still cut off on the mobile version and a message saying "please run the wizard" now appears. The message could be due to the incompleteness of the editing process for the form so I am not going to worry about that message until the very end. Could you please just help me solve the problem of the text answers being cut off on the far right?

Kindly edit my colleagues code above into

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

iframe#customFieldFrame_274 {

    margin-left: -50%!important;
    width: 480px!important;

}

}

Sample Screenshot:

Please give it a try and let us know how it goes.

Thank you.

Tried inserting the new code and things only began to become a bit more confusing. Thank you all so much for your help, I really do appreciate your time.

1. "Please Run the Wizard" message appears above. 

 

2. The "screen%20........." appears under the question

3. The following question sliders are not as long as question #1.

4. The mobile version still shows formatting to the left side of the screen.

5. The mobile version slider length is still short, unfortunately. 

If you are able to help with any of these problems, I will take any advice! You are more than welcome to enter my form and change CSS codes manually if you want try. Thank you again and hope to hear from you soon.

I have cleared some conflict CSS in your form and added these CSS codes.

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

iframe#customFieldFrame_274 {

  margin-left: -150px!important;

    width: 480px!important;

}

}

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

 #customFieldFrame_279{

width: 450px!important; 

   

margin-left: -140px;

 }

}

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

 #customFieldFrame_273{

width: 450px!important; 

   

margin-left: -140px;

 }

}

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

 #customFieldFrame_280{

width: 450px!important; 

   

margin-left: -140px;

 }

}

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

 #customFieldFrame_281{

width: 450px!important; 

   

margin-left: -140px;

 }

}

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

 #customFieldFrame_282{

width: 450px!important; 

   

margin-left: -140px;

 }

}

The slides width are corrected now and responsive.

Sample Screenshot:

Please give it a try and let us know how it goes.

Thank you.

I apologize, but I am not seeing a difference made on either the desktop or mobile versions. Please make sure I did not revert the form incorrectly and may have mistakenly deleted your CSS code or work since I did not see this response till now, and have been trying to make changes on my own. I will not touch the form until I hear back from you all. I am very appreciative of your work. Thank you so much and hope to hear from you soon

It seems the edit I did reverted back to its original form. I have made the changes again and hopefully this time it would not revert.

Please check your form again and let us know if the issue still remains.

Thank you.

Unfortunately, problem still remains the same. The very first question on the form is the only slider that is correct in length, the rest are too short. And the distorted web address still appears under every question. As well as the "Please run the Wizard" message on the first page. Any suggestions? Thank you for all your time and efforts.

The mobile version is looking much better though! It is the desktop version that the sliders are not long enough. Both versions still have the long web address. The mobile version also has the "Next buttons" formatted to the right at the bottom of the pages

I have checked your form again, we can add the CSS code .slider directly to the widget to increase the size of the slider, however, this would affect also our previous custom CSS with the mobile view.

Let me test this further and I will get back to you on this.

Thank you.

To align the "next buttons" kindly try to add these CSS code,

@media screen and (max-width: 480px) {
div.form-pagebreak-next-container{
  margin-left:-50px!important;
}
}

For the slider, you need to paste these codes inside your widgets CSS.

.slider{
width:340px!important;
}

@media screen and (max-width: 480px) {
.slider{
width:140px!important;
}
}

You must do this to each available sliders you have in your form.

Please give it a try and let us know how it goes.

Thank you.

The "next buttons" CSS codes worked great for the mobile version, thank you! Although still having slider length problems. I inserted each of those codes separately within each slider widget, and still improvement towards making them longer. Still have the long URL visible as well.

I am working on the solution of the issue.Will update you in sometime

Please remove the "question text" from the properties.This will remove the Long URL.

Here's a demo of how to do it:

I checked your form and all the sliders are having the same length in mobile and desktop view.

Please try this and let us know if you face any other issues.

Thank you! I was able to fix the URL. 

Also, I understand that the sliders are the same length in both views. My objective is to make the desktop version sliders longer because they are too short for such a large electronic screen. Let me know if you have any more suggestions, I really appreciate all the help you all have provided.

Just for a visual, the very first question of the form has the correct slider length. 

It is the rest of the questions that are too short

Thank you again for your time and work. 

I understand that you only need the CSS codes for mobile but when I inspect your form, there are lots of CSS codes injected in your form for the sliders that are unnecessary. 

To make your form fully desktop and mobile responsive, you only need the following CSS codes for the sliders.

First, inject this CSS codes to your form. Make sure to remove the iframe CSS codes for the sliders.

iframe[src*="sliders"] {

    width: 100% !important;

}

And this for the widget - under Custom CSS tab.

td.label_row {

    display: none;

}

.slider_row_electric_crimson, .slider_row_gunmetal, .slider_row_gunmetal_yellow, .slider_row_mint_green, .slider_row_platinum, .slider_row_platinum_green, .slider_row_raspberry {

    width: 60%;

}

If you want to expand the slider, increase the 60% value.

If you want, you can clone this form https://form.jotform.com/81775766094976 with the above changes. Guide: http://www.jotform.com/help/28-Cloning-a-Form-from-a-Web-Page

As a result,

Desktop:

Mobile: