-
Bali-ChrisAsked on January 20, 2019 at 8:30 AM
Hi there,
I would like to do the following things for my form on mobile only:
1.) Reduce the image size on top
2.) Move the dropdown boxes to the right
3.) Change dropdown background color from grey to white (Why is it not the same as on desktop?)
4.) Change background color on top to #D6EEF0 (Where does this color come from? I don't have it on desktop)Thanks for your help in advance!
Kind Regards,
Chris
Page URL: https://www.auslandssemester-bali.de -
Donald_HReplied on January 20, 2019 at 9:34 AM
Inject the following CSS into the form, it should solve all the issues mentioned above. I have cloned your form and made changes here: https://www.jotform.com/90193414942962;
@media screen and (max-width: 480px) {
div.form-header-group {
background: #d6eef0 !important;
}
.form-col-1 {
float: left !important;
position: relative !important;
width: 49% !important;
margin-top: 10%;
}
.form-col-2 {
float:right !important;
position:relative !important;
width: 49% !important;
}
.form-col-3 {
float:right !important;
position:relative !important;
width: 49% !important;
}
.form-col-4 {
float:right !important;
position:relative !important;
width: 49% !important;
}
}
-
Bali-ChrisReplied on January 20, 2019 at 7:08 PM
Thanks a lot for the CSS. If looks much better now!
But the background of the dropdowns is still grey instead of white. Is this an issue with safari for iOS?
-
Kiran Support Team LeadReplied on January 21, 2019 at 12:31 AM
As I check the form, the CSS seems to be correct and working normally on Android and PC. However, the dropdown is displayed with gradient in iPhone which seems to be an issue with iOS itself. The other form with default dropdown menu is displaying with gradient effect on iPhone.
Thank you!