Recaptcha sizing
-
I have a contact form set up with several fields, then a recaptcha box above the Send button. The recaptcha box is huge… the cfsFieldShell div it sits in is taking a height of 132px when then box itself is only 74. This makes my form look weird. How do I reduce this height? Alternatively, how do I place the Send button on it’s right, rather than under the recaptcha as it currently is? I can float it right, but this only puts it on the RHS below the recaptcha, not inline with it.
My slightly edited CSS is here:
#[SHELL_ID] { [if bg_type_0 == 'color'] background-color: [bg_color_0]; [elseif bg_type_0 == 'img'] background-image: url("[bg_img_0]"); background-repeat: no-repeat; background-size: cover; [endif] margin: auto; } #[SHELL_ID] label { width: 100%; } /*Fields shell basic*/ #[SHELL_ID] input:not([type="checkbox"]):not([type="radio"]), #[SHELL_ID] textarea, #[SHELL_ID] .cfsListSelect, #[SHELL_ID] button{ padding: 5px; width: 100%; font-size: 18px; line-height: normal; [if bg_type_1 == 'color'] border: 1px solid {{adjust_opacity("[bg_color_1]", 0.1)}}; color: {{adjust_opacity("[bg_color_1]", 0.7)}}; background-color: {{adjust_brightness("[bg_color_1]", 196)}}; [elseif bg_type_1 == 'img'] background-image: url("[bg_img_1]"); background-repeat: no-repeat; background-size: cover; [endif] hyphens: none; margin: 0; max-width: 100%; vertical-align: baseline; display: block; height: auto; border-radius: 6px; } /*Fields shell basic*/ #[SHELL_ID] .cfsCheck{ padding: 5px; width: 100%; font-size: 18px; line-height: normal; [if bg_type_1 == 'color'] border: 1px solid {{adjust_opacity("[bg_color_1]", 0.1)}}; color: #dddddd; background-color: #191515; [elseif bg_type_1 == 'img'] background-image: url("[bg_img_1]"); background-repeat: no-repeat; background-size: cover; [endif] hyphens: none; margin: 0; max-width: 100%; vertical-align: baseline; display: block; height: auto; border-radius: 6px; } #[SHELL_ID] .cfsFieldShell input[type="submit"], #[SHELL_ID] .cfsFieldShell input[type="reset"], #[SHELL_ID] .cfsFieldShell input[type="button"], #[SHELL_ID] .cfsFieldShell button { cursor: pointer; font-weight: 700; border: 0 none; color: #ddd; -webkit-appearance: none; } #[SHELL_ID] .cfsFieldShell input[type="submit"], #[SHELL_ID] .cfsFieldShell input[type="button"], #[SHELL_ID] .cfsFieldShell button { [if bg_type_2 == 'color'] background-color: [bg_color_2]; background-image: none; [elseif bg_type_2 == 'img'] background-image: url("[bg_img_2]"); background-repeat: no-repeat; background-size: cover; [endif] } #[SHELL_ID] .cfsFieldShell input[type="submit"]:hover, #[SHELL_ID] .cfsFieldShell input[type="button"]:hover, #[SHELL_ID] .cfsFieldShell button:hover { [if bg_type_2 == 'color'] background-color: {{adjust_opacity("[bg_color_2]", 0.7)}}; [elseif bg_type_2 == 'img'] opacity: 0.7; [endif] } #[SHELL_ID] .cfsFieldShell input[type="reset"] { [if bg_type_3 == 'color'] background-color: [bg_color_3]; background-image: none; [elseif bg_type_3 == 'img'] background-image: url("[bg_img_3]"); background-repeat: no-repeat; background-size: cover; [endif] } #[SHELL_ID] .cfsFieldShell input[type="reset"]:hover { [if bg_type_3 == 'color'] background-color: {{adjust_opacity("[bg_color_3]", 0.7)}}; [elseif bg_type_3 == 'img'] opacity: 0.7; [endif] } /* Placeholder text color -- selectors need to be separate to work. */ #[SHELL_ID] ::-webkit-input-placeholder { color: rgba(51, 51, 51, 0.7); } #[SHELL_ID] :-moz-placeholder { color: rgba(51, 51, 51, 0.7); } #[SHELL_ID] ::-moz-placeholder { color: rgba(51, 51, 51, 0.7); opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */ } #[SHELL_ID] :-ms-input-placeholder { color: rgba(51, 51, 51, 0.7); }Thanks!
Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
The topic ‘Recaptcha sizing’ is closed to new replies.