CF7 Submit Button Size/Styling

Resolved jmccrone
(@jmccrone)

5 years, 4 months ago

Want a CF7 form with three text fields and the submit button all on one line. Used your plugin to layout the grid. Added some custom CSS to reduce some of the column margins and padding so everything was tighter. Only issue I’m having is with the Submit button. It’s huge and I want the button to be same height and align with the text boxes. Tried to add custom CSS for this which resized it but the button text is no longer centered. Is there another way I need to resize the submit button to override the CSS?

Thanks

.cf7sg-container .cf7-smart-grid.has-grid .wpcf7-submit
{
color:#ffffff;
background:#000000;
font-size: 12px;
border-radius: 0px;
height: 40px!important;
}

The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

Plugin Author

Aurovrata Venet

(@aurovrata)

5 years, 4 months ago

Only issue I’m having is with the Submit button

the plugin doesn’t style your, it only affects the layout. The button style on your form is coming from your theme.

Tried to add custom CSS for this which resized it but the button text is no longer centered. Is there another way I need to resize the submit button to override the CSS?

it is being set by your theme, and this is the rule you need to override,


.button, [type="submit"], .comment-form [type="submit"] {
	-webkit-appearance: none;
	border-radius: 0;
	cursor: pointer;
	display: inline-block;
	font-family: "catamaran", "hind_vadodara", Helvetica, Roboto, Arial, sans-serif;
	height: 60px;
	letter-spacing: 1px;
	line-height: 60px;
	text-align: center;
	-webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
	-o-transition: background-color 0.25s ease-out, color 0.25s ease-out;
	transition: background-color 0.25s ease-out, color 0.25s ease-out;
	vertical-align: middle;
}

the line-height and the height directive

Viewing 1 replies (of 1 total)

The topic ‘CF7 Submit Button Size/Styling’ is closed to new replies.