-
kgavrielAsked on January 10, 2017 at 8:46 PM
Hello,
I need some help making the header image full-width. So far I was able to remove the shadow-border, make form 100% width (top code) and set image width to 100%, but still cant get rid of the white space.
I also need help selecting all the fields so I can set left padding with css. Its easy to select required ones, but not the rest. Only option is to select the form-line, but that moves image as well.
Relevant code and screenshots below.
Thanks!
.form-all {
width : 100% !important;
max-width : none;
margin-top : 20px;
padding : 0px;
}
----------------
.form-image {
width : 100%;
height : 100%;
}
Page URL: https://form.jotform.com/70065517912151 -
CharlieReplied on January 11, 2017 at 2:41 AM
Hi,
Could you please check this cloned form I have and if that's what you would like to accomplish: https://form.jotform.com/70101054796956. You can clone it to have a copy of it in your account. Here's how: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL
I checked your CSS code and updated it to this:
.supernova .form-all {
border : 0px solid rgba(0, 0, 0, 0);
-webkit-box-shadow : 0 0px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow : 0 0px 0px rgba(0, 0, 0, 0.1);
box-shadow : 0 0px 0px rgba(0, 0, 0, 0.1);
}
.form-all {
width : 100% !important;
max-width : none;
margin-top : 0 !important;
padding : 0px;
}
.form-html h2 {
font-weight : 700;
}
.jotform-form {
padding : 0px;
margin : 0px;
}
.form-image {
width : 100%;
height : 100%;
}
.form-html {
padding-left : 50px;
}
/*Set all the images to 0 padding and set margin-top to 0*/
[data-type='control_image'].form-line {
padding: 0 !important;
margin-top: 0 !important;
}
/*Set all fields that are not images to have a margin left and right auto and width to 80%*/
li:not([data-type='control_image']) {
margin-left: auto !important;
margin-right: auto !important;
width: 70% !important;
}
The code blocks that I added are the ones at the last part, I added comments on them to guide you better.
Let us know if that works.
-
kgavrielReplied on January 11, 2017 at 8:27 AM
Thank you so much Charlie, that is exactly what I'm trying to accomplish! I'll do this and let you know how it went :)
-
kgavrielReplied on January 11, 2017 at 9:05 AM
It worked like a charm! Thanks again. I simply injected your code :)
https://form.jotform.com/70065517912151