Vertical align text in contact submit button

Support
#1

Hi There,

I am looking to vertically align the text within my submit button on my contact page.

Thanks!

Chris

ddashfens.com

#2

Hello Chris,

Thanks for asking. :slight_smile:

You can add following CSS under Pro > Theme Options > CSS:

input[type="submit"] {
		transform: rotate(90deg);
		transform-origin: 32% 52%;
}

Here are some related links for further reading:

Hope this helps.

#3

Hi there,

Thanks for the quick reply.

I think I miswrote my question. The previous response actually flipped the entire submit button by 90 degrees.

If you look at the submit button on my page, the text within it is not centered to the border as it is off centered vertically.

I was just wondering how to vertically center the text within the submit button.

Cheers,

Chris

#4

Hey Chris,

Please add padding: 12px 18px to the existing custom code you have for input.wpcf7-form-control.wpcf7-submit

Hope that helps.

#5

Hi There,

Thanks for your reply.

With the padding being added in pixels, it doesn’t seem to work well at different breakpoints and ends up off center again.

Is there a more responsive solution for this?

Thanks again,

Chris

#6

Hello Chris,

Thanks for updating the thread.

You can use CSS media queries to fix positioning of text in button. Please add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  input.wpcf7-form-control.wpcf7-submit
 {
    padding: 12px 18px !important;
  }
}

To learn more about CSS media queries, please take a look following resource.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thanks.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.