-
KeyshaunSmithAsked on July 2, 2016 at 6:25 PM
The form does not fit a mobile device screen even with the "Mobile Responsive" widget.
Here is the URL to my form: https://form.jotform.com/KeyshaunSmith/DramaCampSurvey
If you notice the header does not fit. along with the 1-10 scale questions on the latter pages in the form.
Any help would be greatly appreciated, thanks!
-
jonathanReplied on July 2, 2016 at 11:48 PM
From what I see on your form https://www.jotform.us/form/60657589174166 it was the form cover image that is not being responsive on mobile browser.
Let me check for the appropriate CSS codes that will fix this. I'll get back shortly
-
jonathanReplied on July 3, 2016 at 12:01 AM
Please test my form https://form.jotform.com/61839158769979 on your mobile browser.
I checked it on my end and I see it responding properly on mobile browser.
--
Try adding this CSS code on your form https://www.jotform.us/form/60657589174166
@media screen and (min-width: 10px) and (max-width: 480px){
.form-all:before {
content : "" !important;
background-image : url("https://www.jotform.com/uploads/KeyshaunSmith/form_files/drama.jpg") !important;
display : inline-block !important;
height : 320px !important;
position : absolute !important;
background-size : 100% 100% !important;
background-repeat : no-repeat !important;
width : 100% !important;
}
}
Let us know if this did not work.
-
KeyshaunSmithReplied on July 3, 2016 at 12:08 AM
That fixed the issue with the cover image but not the 1-10 scale questions see below.
-
jonathanReplied on July 3, 2016 at 12:33 AM
I apologize I did not see that issue as well. I see it now with the scale rating widget not being mobile browser responsive using your form https://www.jotform.us/form/60657589174166
Let me check how it can be fix as well. I'll be back shortly.
-
jonathanReplied on July 3, 2016 at 1:12 AM
Please replace the CSS codes I suggested previously with this one
@media screen and (min-width: 10px) and (max-width: 480px){
.form-all:before {
content : "" !important;
background-image : url("https://www.jotform.com/uploads/KeyshaunSmith/form_files/drama.jpg") !important;
display : inline-block !important;
height : 320px !important;
position : absolute !important;
background-size : 100% 100% !important;
background-repeat : no-repeat !important;
width : 100% !important;
}
}
.form-all {
max-width : 690px;
}
.form-line, .form-input-wide {
max-width : 690px;
margin : 0 auto;
}
@media only screen and (max-width:480px){
.form-all {
max-width : 100% !important;
}
.form-line, .form-input-wide {
max-width : 100%;
margin : 0 auto;
}
.form-line {
padding : 0px !important;
text-align: left !important;
}
}
it should make the scale rating field respond on mobile browser as well.
Let us know if this did not work.