Submit button is much larger in embedded form than in preview

Thanks, this helped. Another question for you: do you know why my submit
button is suddenly so large? It's normal in the JotForm preview and then
takes up the whole line when I insert it into my website:
http://lacerlot.com/pages/measurement-guide
Still trying to work out how to fix the footer.
Thanks,
Caitlin

Due to the width of the frame the form is embedded to, the submit button thinks the forms is on a mobile device and is setting the width to 100% instead of the width seen in the form preview.  Adding this code to your form should allow the submit button to be the same size in both:

http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

@media only screen and (max-width: 480px) {

.form-submit-button{

width : 100px; !important;

}

}

Thanks, I see other instructions in the CSS for @media, should I edit those? Not sure where to place this code: 

 

@import "https://fonts.googleapis.com/css?family=Cardo:light,lightitalic,normal,italic,bold,bolditalic";

.form-all {

font-family: "Cardo", sans-serif;

}

.form-all {

width: 691px;

}

.form-label-left,

.form-label-right {

width: 182px;

}

.form-label {

white-space: normal;

}

.form-label.form-label-auto {

display: block;

float: none;

text-align: left;

}

.form-label-left {

display: inline-block;

white-space: normal;

float: left;

text-align: left;

}

.form-label-right {

display: inline-block;

white-space: normal;

float: left;

text-align: right;

}

.form-label-top {

white-space: normal;

display: block;

float: none;

text-align: left;

}

.form-all {

font-size: 13px;

}

.form-label {

font-weight: bold;

}

.form-checkbox-item label,

.form-radio-item label {

font-weight: normal;

}

.supernova {

background-color: none;

background-color: #ffffff;

}

.supernova body {

background-color: transparent;

}

/*

@width30: (unit(@formWidth, px) + 60px);

@width60: (unit(@formWidth, px)+ 120px);

@width90: (unit(@formWidth, px)+ 180px);

*/

/* | */

/* | */

/* | */

@media screen and (max-width: 480px) {

.jotform-form {

padding: 10px 0;

}

}

/* | */

/* | */

@media screen and (min-width: 480px) and (max-width: 768px) {

.jotform-form {

padding: 30px 0;

}

}

/* | */

/* | */

@media screen and (min-width: 480px) and (max-width: 690px) {

.jotform-form {

padding: 30px 0;

}

}

/* | */

/* | */

@media screen and (min-width: 768px) {

.jotform-form {

padding: 60px 0;

}

}

/* | */

/* | */

@media screen and (max-width: 690px) {

.jotform-form {

padding: 0;

}

}

/* | */

.supernova .form-all,

.form-all {

background-color: none;

border: 1px solid transparent;

}

.form-all {

color: #000000;

}

.form-header-group .form-header {

color: #000000;

}

.form-header-group .form-subHeader {

color: #1a1a1a;

}

.form-sub-label {

color: #1a1a1a;

}

.form-label-top,

.form-label-left,

.form-label-right,

.form-html {

color: #000000;

}

.form-checkbox-item label,

.form-radio-item label {

color: #1a1a1a;

}

.form-line.form-line-active {

-webkit-transition-property: all;

-moz-transition-property: all;

-ms-transition-property: all;

-o-transition-property: all;

transition-property: all;

-webkit-transition-duration: 0.3s;

-moz-transition-duration: 0.3s;

-ms-transition-duration: 0.3s;

-o-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-timing-function: ease;

-moz-transition-timing-function: ease;

-ms-transition-timing-function: ease;

-o-transition-timing-function: ease;

transition-timing-function: ease;

background-color: inherit;

}

/* ömer */

.form-radio-item,

.form-checkbox-item {

padding-bottom: 0px !important;

}

.form-radio-item:last-child,

.form-checkbox-item:last-child {

padding-bottom: 0;

}

/* ömer */

.form-single-column .form-checkbox-item,

.form-single-column .form-radio-item {

width: 100%;

}

.supernova {

height: 100%;

background-repeat: no-repeat;

background-attachment: scroll;

background-position: center top;

background-repeat: repeat;

}

.supernova {

background-image: none;

}

#stage {

background-image: none;

}

/* | */

.form-all {

background-repeat: no-repeat;

background-attachment: scroll;

background-position: center top;

background-repeat: repeat;

}

.form-header-group {

background-repeat: no-repeat;

background-attachment: scroll;

background-position: center top;

}

.form-line {

margin-top: 0px;

margin-bottom: 0px;

}

.form-line {

padding: 11px 17px;

}

.form-all {

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;

}

.form-section:first-child {

-webkit-border-radius: 6px 6px 0 0;

-moz-border-radius: 6px 6px 0 0;

border-radius: 6px 6px 0 0;

}

.form-section:last-child {

-webkit-border-radius: 0 0 6px 6px;

-moz-border-radius: 0 0 6px 6px;

border-radius: 0 0 6px 6px;

}

.form-all .qq-upload-button,

.form-all .form-submit-button,

.form-all .form-submit-reset,

.form-all .form-submit-print {

font-size: 1em;

padding: 9px 15px;

font-family: "Cardo", sans-serif;

font-size: 14px;

font-weight: normal;

}

.form-all .form-pagebreak-back,

.form-all .form-pagebreak-next {

font-size: 1em;

padding: 9px 15px;

font-family: "Cardo", sans-serif;

font-size: 13px;

font-weight: normal;

}

/*

& when ( @buttonFontType = google ) {

@import (css) "@{buttonFontLink}";

}

*/

h2.form-header {

line-height: 1.618em;

font-size: 1.714em;

}

h2 ~ .form-subHeader {

line-height: 1.5em;

font-size: 1.071em;

}

.form-header-group {

text-align: left;

}

/*.form-dropdown,

.form-radio-item,

.form-checkbox-item,

.form-radio-other-input,

.form-checkbox-other-input,*/

.form-captcha input,

.form-spinner input,

.form-error-message {

padding: 4px 3px 2px 3px;

}

.form-header-group {

font-family: "Cardo", sans-serif;

}

.form-section {

padding: 1px 3px 1px 3px;

}

.form-header-group {

margin: 12px 36px 12px 36px;

}

.form-header-group {

padding: 24px 0px 24px 0px;

}

.form-textbox,

.form-textarea {

padding: 4px 3px 2px 3px;

}

.form-textbox,

.form-textarea,

.form-radio-other-input,

.form-checkbox-other-input,

.form-captcha input,

.form-spinner input {

background-color: inherit;

}

[data-type="control_dropdown"] .form-input,

[data-type="control_dropdown"] .form-input-wide {

width: 150px;

}

.form-label {

margin-bottom: 3px;

margin-right: 0;

}

.form-label {

font-family: "Cardo", sans-serif;

}

li[data-type="control_image"] div {

text-align: left;

}

li[data-type="control_image"] img {

border: none;

border-width: 0px !important;

border-style: solid !important;

border-color: false !important;

}

.form-line-column {

width: auto;

}

.form-line-error {

overflow: hidden;

-webkit-transition-property: none;

-moz-transition-property: none;

-ms-transition-property: none;

-o-transition-property: none;

transition-property: none;

-webkit-transition-duration: 0.3s;

-moz-transition-duration: 0.3s;

-ms-transition-duration: 0.3s;

-o-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-timing-function: ease;

-moz-transition-timing-function: ease;

-ms-transition-timing-function: ease;

-o-transition-timing-function: ease;

transition-timing-function: ease;

background-color: #fff4f4;

}

.form-line-error .form-error-message {

background-color: #ff3200;

clear: both;

float: none;

}

.form-line-error .form-error-message .form-error-arrow {

border-bottom-color: #ff3200;

}

.form-line-error input:not(#coupon-input),

.form-line-error textarea,

.form-line-error .form-validation-error {

border: 1px solid #ff3200;

-webkit-box-shadow: 0 0 3px #ff3200;

-moz-box-shadow: 0 0 3px #ff3200;

box-shadow: 0 0 3px #ff3200;

}

.ie-8 .form-all {

margin-top: auto;

margin-top: initial;

}

.ie-8 .form-all:before {

display: none;

}

/* | */

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

.jotform-form {

padding: 0;

}

.form-all {

border: 0;

width: 100% !important;

max-width: initial;

}

.form-sub-label-container {

width: 100%;

margin: 0;

}

.form-input {

width: 100%;

}

.form-label {

width: 100%!important;

}

.form-line {

padding: 2% 5%;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

input[type=text],

input[type=email],

input[type=tel],

textarea {

width: 100%;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

max-width: initial !important;

}

.form-input,

.form-input-wide,

.form-textarea,

.form-textbox,

.form-dropdown {

max-width: initial !important;

}

div.form-header-group {

padding: 24px 0px !important;

margin: 0 12px 2% !important;

margin-left: 5% !important;

margin-right: 5% !important;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

[data-type="control_button"] {

margin-bottom: 0 !important;

}

.form-buttons-wrapper {

margin: 0!important;

}

.form-buttons-wrapper button {

width: 100%;

}

table {

width: 100%!important;

max-width: initial !important;

}

table td + td {

padding-left: 3%;

}

.form-checkbox-item input,

.form-radio-item input {

width: auto;

}

.form-collapse-table {

margin: 0 5%;

}

}

/* | *//*__INSPECT_SEPERATOR__*/

Add the code in my post at the very bottom of the current code.  It should overwrite and code that is currently causing the submit button to be 100% width.

Hi, thanks again for your help, unfortunately it did not make a difference to the size of the button: http://lacerlot.com/pages/measurement-guide

 

Also, I've enabled scrolling but it doesn't seem to be working within the form?

It looks like the change only apply on the form when previewed from direct link. Can you try getting the IFrame code and re-embed the form again.

Also, I've enabled scrolling but it doesn't seem to be working within the form?

The scrolling seems to work but since the page is long enough to display the form contents, it does not display.

 

Let us know if the changes apply to the submit button after you re-embed the form.

Unfortunately this didn't work to shrink the submit button. 

 

Thanks!!

I've checked your CSS code there was an additional ; sign in your code. We would appreciate it if you could change the code as you see below:

 

@media only screen and (max-width: 480px) {

.form-submit-button{

width : 100px !important;

}

}

.form-submit-button{

width : 100px !important;

}

At that time it will work as expected. If this does not resolve the issue, please let us know and we will be glad to take another look.

I've created a separate thread for your second question, so anyone in the support staff will be able to assist you with your specific requirement. Please follow up there:

https://www.jotform.com/answers/821673