-
brianatbadAsked on December 19, 2017 at 12:43 PM
There's label spacing for my 'which week' dropdown that I want to delete...it only shows when I embed the source code on my website -- see screenshot and url below:
https://www.breakadifference.org/locations/greater-new-york-city-ny/
The JotForm hosted form does not show spacing, which is what I want -- see screenshot and url below:
https://form.jotform.com/73475556751971
-------------------------------------
See all my CSS below:
.form-label-left, .form-label-right, .form-label-top {
display : none;
}
.form-label-top {
display : none;
}
#cid_11 {
text-align-last : center;
text-align : center;
-ms-text-align-last : center;
-moz-text-align-last : center;
}
.form-textbox {
color : 555 !important;
font-size : 16px !important;
font-family : 'Muli' !important;
text-align : center;
border-color : #ccc !important;
-webkit-border-radius : 10px !important;
-moz-border-radius : 10px !important;
border-radius : 10px !important;
border : 1px !important;
box-shadow : 0px 1px 1px #888888 !important;
}
.form-line {
padding-top : 0px;
padding-bottom : 0;
margin-top : 10px;
margin-bottom : 0;
}
.form-required {
visibility : hidden;
}
.form-dropdown {
font-size : 16px !important;
font-family : 'Muli'!important;
width : 550px;
color : 555 !important;
background : #ffffff !important;
border-color : #ccc !important;
-webkit-border-radius : 10px !important;
-moz-border-radius : 10px !important;
border-radius : 10px !important;
border : 1px !important;
box-shadow : 0px 1px 1px #888888 !important;
}
select {
text-align-last : center;
text-align : center;
-ms-text-align-last : center;
-moz-text-align-last : center;
}
.form-submit-button {
font-family : 'Muli' !important;
background : #be1e2d !important;
color : #fff;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
border-radius : 5px;
border : 0;
height : 60px;
font-size : 20px !important;
text-shadow : 0 0px #000 !important;
margin-top : 15px;
border : 0;
}
#input_8 {
font-family : 'Muli' !important;
background : #fe8300 !important;
color : #fff;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
border-radius : 5px;
border : 0;
height : 60px;
font-size : 20px !important;
text-shadow : 0 0px #000 !important;
margin-top : 15px;
border : 0;
}
#input_12 {
font-family : 'Muli' !important;
background : #be1e2d !important;
color : #fff;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
border-radius : 5px;
border : 0;
height : 60px;
font-size : 20px !important;
text-shadow : 0 0px #000 !important;
margin-top : 15px;
border : 0;
}
-
John_BensonReplied on December 19, 2017 at 2:24 PM
I checked the website URL (https://www.breakadifference.org/locations/greater-new-york-city-ny/) you provided and I didn't see the "Which week" dropdown. Here's a screenshot:
Please provide the correct link so we can investigate it further. Thank you.
-
brianatbadReplied on December 19, 2017 at 2:46 PM
@john_benson -- yeah sorry, I've been messing around with the form since I posted the original question.
I moved the 'week' dropdown down to the bottom now... it shows the unwanted gap spacing.
Thanks in advance for your help!
-
brianatbadReplied on December 19, 2017 at 3:08 PM
It seems setting the top margins and padding for that one drop down to -50px moved it to where I wanted...
This fix makes it work the way I want it when I embed it on my website...but it shows up overlapping the previous question on the jotform hosted form. Seems there's some css on my website messing with the coding of my form even though I have '!important' on most of my forms' css coding.
Here's my partial fix....
#input_9 {
color : 555;
padding-top : -50px !important;
padding-bottom : 0px !important;
margin-top : -50px !important;
margin-bottom : -20px !important;
}
-
Jed_CReplied on December 19, 2017 at 4:06 PM
Thanks for the response.
Just wanted to confirm if you are referring to the spacing between CHILDREN & YOUTH and First Name or the checkbox and the Group Volunteering button?
By the way, the spacing you've first reported looks good from my end. Can you please send us a screenshot with markings so we can see what you are referring at.
Looking forward for your response.
-
brianatbadReplied on December 20, 2017 at 9:51 AM
@Jed_C thanks so much for your response. I fixed my original problem with the spacing between 'Mobile#' and 'Select Week' by adding negative spacing at the top of the 'Select Week' CSS.
Thanks again for your response!