-
lharrimanAsked on July 11, 2016 at 8:40 PM
I am using a theme with a transparent center panel over a background image. It looks great when I'm in the builder, but when I view the form in preview or elsewhere, the frame becomes opaque. This image shows the effect I'm going for. Any help?
Page URL: https://form.jotform.com/61907964818975 -
Kiran Support Team LeadReplied on July 11, 2016 at 11:00 PM
The issue is being caused by the form-section which is set to white background and overriding the the transparent setting on the form. Please inject the following CSS code to your JotForm to make the background transparent.
.form-section {
background: transparent !important;
}
The form should be now displaying as it is displayed in the preview. Thank you!
-
lharrimanReplied on July 12, 2016 at 8:47 AM
Great, thanks. But now I'm having several problems with the mobile version: the background isn't fixed, the size is wrong, and the colored boxes don't align with the input fields. Can you help me with this?
-
Welvin Support Team LeadReplied on July 12, 2016 at 11:11 AM
I've fixed it for you by injecting the following custom CSS codes to your form:
/* Full Name Field Override */
#id_3 {
width: 100%;
}
/* Checkbox/Radio Button override */
.form-checkbox-item label, .form-radio-item label {
white-space: normal;
}
/* Submit button stretch and center on mobile */
@media only screen and (max-device-width: 768px) {
.form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
width: 100%;
}
}
Please check again and let us know if you need any further assistance.
-
lharrimanReplied on July 12, 2016 at 1:01 PM
-
Kiran Support Team LeadReplied on July 12, 2016 at 1:08 PM
Your other question is moved to a separate thread and shall be answered there shortly.
https://www.jotform.com/answers/880819
Thank you!