-
UnwelcomeAsked on January 7, 2022 at 4:55 PM
I created this form and this is what it looks like on mobile -- the text is going off the screen.
It looks fine on desktop, but no matter what adjustments I make to the sizing -- mobile always looks the same with the text cut off.
Page URL: https://form.jotform.com/220035180717144 -
Kenneth JotForm SupportReplied on January 8, 2022 at 2:09 AM
Thank you for reaching support,
I customized the form as best as I could.
Please insert these codes into your Inject Custom CSS Area: https://www.jotform.com/help/117-how-to-inject-custom-css-codes/
@media screen and (max-width: 480px), screen and (max-device-width: 767px) {
.form-all {
display: inline-block !important;
}
label#label_3 {
float: right !important;
}
div#cid_3 {
display: inline-block !important;
padding-bottom: 20px !IMPORTANT;
}
label#label_8 {
float: left !important;
}
li#id_9 {
display: inline-block !important;
}
#cid_9 span[data-input-type="areaCode"].form-sub-label-container {
width: 30% !important;
}
input#input_9_area {
width: 100% !important;
}
#cid_9 span[data-input-type="phone"].form-sub-label-container {
width: 70% !IMPORTANT;
}
li#id_4 {
display: inline-grid !important;
}
li#id_14 {
display: inline-grid !important;
}
li#id_18 {
display: inline-grid !important;
}
li#id_11 {
display: inline-grid !important;
}
li#id_12 {
display: inline-grid !important;
}
li#id_6 {
display: inline-grid !important;
}
li#id_5 {
display: inline-grid !important;
}
li#id_24 {
display: inline-grid !important;
}
li#id_16 {
display: inline-grid !important;
}
li#id_22 {
display: inline-grid !important;
}
li#id_17 {
padding-top: 30px !IMPORTANT;
padding-bottom: 30px !important;
}
}
Let us know if you have any further questions.
Best.