I have a Contact form 7 on my home page here: http://grownowsma.com/
I have been trying to get the input fields to be centered. I tried a few tricks I've used before and answers from other Stack Overflow questions and for some reason no luck.
I tried this trick: http://www.screencast.com/t/ygBP3eQn9jQu
I tried these in the CSS:
.contactform input[type="text"],form .contactform input[type="email"]{
margin: 9px auto 0 !important;
}
And this:
.wpcf7-form-style {
max-width: 800px;
margin: 0 auto;
float: none;
display: block;
}
Both no luck. I've been messing around in the inspector for a while and haven't been able to change it. Any other suggestions for selectors or attributes to try?
You don't have an element with the class contactform, so you can't select inputs beneath it. Either add that around the form shortcode in your post, or use a different selector e.g. .home .wpcf7-form input[type="text"], .home .wpcf7-form input[type="email"] assuming you don't add a second CF7 form on the homepage where you don't want to center the inputs.
Other than that, margin: auto; should work nicely.
If you want it globally, use this CSS:
.f7-form-control, input[type="text"].wpcf7-form-control,input[type="email"].wpcf7-form-control, input[type="password"].wpcf7-form-control, input[type="tel"].wpcf7-form-control, textarea.wpcf7-form-control,.post-password-form input[type='password'],input[type="email"] {
margin: auto;
}
If you want for only a page then you can use this plugin https://wordpress.org/plugins/wp-add-custom-css/ . It will give you a option to put custom css in individual page.
Assume that your contact form ID is: 4579
And here is the CSS for that specific form only.
#wpcf7-f4579-p4004-o1 .wpcf7-text{
display: block;
margin: auto;
}
It finally worked for me:
label, .wpcf7-submit{
margin-left: 50% !important;
}
You can also add a <div style="text-align:center"> directly in your form if you want.
Please add in you style.css:
.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
margin-left: 250px !important;
}
Related
Anybody here can help me how to center my login/sign up form?
This is my website https://www.cryptobank.expert/ you will be asked to login, that's the form I want to center. My problem is I dont know what name should I edit in the CSS.
Following should work
.ns-form-horizontal .ns-control-label {
text-align: left;
margin-bottom: 0;
padding-top: 7px;
}
Add the following snippet in Custom CSS Panel
.xoo-el-form-container.xoo-el-form-inline {
margin: 0 auto !important;
display: block;
}
I have a very little CSS issue that don't know how to resolve.
I have moved the input form into checkout a little in right, but looks like label dont move with form. Now looks like this:
I tried to customize CSS with that rules:
form.checkout #billing_last_name_field, form.checkout
#shipping_last_name_field {
float: none !important;
margin-top: -24px;
margin-left: 40px; // i added this but nothing changed.
}
Any help here?
what to change to make all fields equal?
Link to product here
You could try to add this additional CSS rule targeting the <label> html tag:
form.checkout #billing_last_name_field label,
form.checkout #shipping_last_name_field label{
margin-left: 40px;
}
It should work.
Ok, this is the styling I want to be used
.suggestion-taxonomies-product-visibility span {
display: inline-block;
float: left;
padding-left: 10px;
}
The usual of mentioning the element here doesn't seem to work, any ideas? I can specify more if need be. I am new and not great at specifying my problem!
Thanks.
use important like
.suggestion-taxonomies-product-visibility span {
display: inline-block !important;
float: left !important;
padding-left: 10px !important;
}
Place your style after the theme stylesheet. It will override the theme styling. Better still, you can replace the suggestion-taxonomies-product-visibility class span styling in the styles.css file. If you opt for the latter, changes will be lost when updating the theme. You can avoid this by building a child theme to the theme you are currently using.
Use !important tag in each, ex:
.someclass {
width: 10px !important;
}
I am trying to find a way to style the default WP-login widget with some CSS. The problem though, is that no matter the selector or class that I use, I simply have 0 effect in the end.
I am aiming to remove the borders on the top, left and right; so only the bottom is left (like an underline), as well as put the 3 fields inline with eachother (username, password, sign in).
Anyone have an idea of what can be done?
Link to website in question: dev.melliandshayne.com
location of login: Currently I set it to the footer so it's easier to find. I would have it somewhere in the middle of the page at one point though.
Current theme: Ronneby Wordpress theme
Many many thanks!!
inspect the element with firebug or some sort of code inspector then you will be able to see the class/id that's applied to the element.
.widget.widget_crum_login form p.login-submit .button,
.widget.widget_crum_login form p.login-password input[type=password],
.widget.widget_crum_login form p.login-username input[type=text]{
border: none;
border-bottom: 1px solid #e0e0e0;
}
.widget.widget_crum_login form p.login-submit {
width: 100%;
}
This will align them side by side as requested...
p.login-submit, p.login-username, p.login-password {
float: left;
padding: 0 1em;
width: 33% !important;
}
.widget.widget_crum_login form p.login-submit .button, .widget.widget_crum_login form p.login-password input[type="password"], .widget.widget_crum_login form p.login-username input[type="text"] {
width: 100%;
}
.login-lost-password,
.login-remember {
clear: left;
text-align: center;
}
I'm trying to get a div to be centered on the page. however WordPress isn't cooperating and doing it like it does in my testing HTML document. Any ideas?
HTML
<div class="propreq grid_4"><h2>Request a Proposal</h2></div>
CSS
.propreq {
margin: 0 auto;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
background-color: #0e7bd0;
}
Looks like it's because of a couple things. Try adding the styles below to your current definition (or changing them, if they're already there):
.propreq {
display: block;
float: none;
}
Before, .propreq had display:inline, float:left applied to it, making the styles you were applying to it ineffective. I hope this gives you what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
There could be Several reasons.
1st: Try examining the CSS using Developer's Tools (in Chrome/FireFox).
There could be another CSS rule which is OVER-RIDING your this one.
2nd: Try using
<div align="center" class="propreq grid_4"><h2>Request a Proposal</h2></div>
My best guess is, Another CSS-Rule is overtaking the Center Property.
.propreq {
margin: 0 auto;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
background-color: #0e7bd0;
}
TIP: Do a quick search on "Examining using FireFox Developer Tools" | Check out for the text-align: center; in .propreq section.