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.
Related
I am trying to give 20px space between the Form and the Button showed in the image:
See Image
You can access the page through this link: https://kamadob10.eu/my-account/account-information/
Use this log in information: example#gmail.com / example.102938
I have been trying to target the form's upper fieldset but it is not working. I can't find what is my mistake:
.woocommerce-EditAccountForm edit-account fieldset {
margin-bottom: 20px;
}
I would really appreciate if someone could help me with this. I am pretty new to CSS. Thank you!
Try this code,
button.woocommerce-Button.button {
margin-top: 20px !important;
}
or for just for this page,
.page-id-545 button.woocommerce-Button.button {
margin-top: 20px;
}
I've been reformatting the Coupon Code box on the Woocommerce checkout page. It was originally huge and at the top of the page, which is terrible design because people will see the big coupon code box and leave your site to go look for a coupon, then never come back.
I have the coupon box where I want and it works just fine if you press enter. The issue is that you can't see the Apply button. It is right below the coupon code box. If you hover over it, the little hand cursor appears. You just can't see it.
How can I get the button to appear to the right of the coupon code box on desktop? It'll get pushed below it on mobile.
You will have to add an item to the cart to see the checkout page: http://198.199.114.131/shop/
Checkout page: http://198.199.114.131/checkout/
Add this style to your theme style.css or any frontend custom css file:
form.checkout_coupon input[type="submit"] {
opacity: 1 !important;
color: #fff !important;
background-color: #dba633 !important;
width: 48% !important;
}
form.checkout_coupon{
width:100% !important;
}
form.checkout_coupon #coupon_code{
width:50% !important;
}
Add this:
input[name="apply_coupon"] {
opacity: 1 !important;
float: left;
background-color: bisque !important;
min-width: 100%;
margin-top: 1em !important;
}
From what I can see, it's the background: none !important; that's not letting you see anything near the coupon box. Remove that piece of code and you can see the button, however, there is no text on the button.
To put the button under the coupon code input box, remove the background: none !important; where you have specified it and then add the following code in your theme's custom CSS or child theme's CSS file:
.woocommerce-cart .entry-content .woocommerce .actions .coupon .button {
top: 60px;
}
Currently, top: 3px; is specified.
To display the text, add this code to your theme's custom CSS or child theme's CSS file:
.woocommerce-cart .entry-content .woocommerce .actions .coupon .button:before {
content: "Apply Coupon";
}
You can change the Apply Coupon text to whatever text you want to display there.
What I have offered above is a workaround as I do not know what edits you made to the coupon box during your reformatting, but it should solve your problem.
Hope this helps.
Currently working on http://getfitquick.co.uk/ but have come into an issue, when the menu is viewed on Tablets/Mobile the menu is currently active with the toggle constantly on, would really like to remove this so that the user is able to click menu and allow the menu to appear as opposed to it always being active.
Would also like to mention for reference that on http://getfitquick.co.uk/shop/ the menu is actually appearing how I want it to, however I am a bit unsure how I did this,
Is there anything anyone could suggest? Maybe something I may have done wrong within the process?
Thanks for reading,
On the homepage there's a css code that runs display: inline-block !important; for .menu .nav
#media (max-width: 768px) (index):251
.menu .nav {
position: relative;
background-color: #000000;
left: 0px;
border-color: #e51d25;
display: inline-block !important;
}
that code will override the default behavior of the mobile nav
at the top of that code, there's a comment that says
/*
The following CSS generated by Yellow Pencil Plugin.
http://waspthemes.com/yellow-pencil
*/
So I'm not quit sure if that CSS is directly generated from that plugin option on the homepage or if its from a custom CSS code assign to that homepage,
the best way to fix that is to look for that code, its should be somewhere in the Yellow Pencil Plugin
The second option though is really a bad idea is to modify and override it
CSS Override
header .menu .nav {
display: none !important;
}
header .menu.active .nav {
display: block !important;
}
then add active when the button is click and remove it when click again,
jQuery
(function( $) {
$('header').on('click', '.menu .toggleMenu', function() {
$(this).parent().toggleClass('active');
});
})(jQuery);
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;
}
I'm trying to use WP Web Scraper plugin with WP in my site www.eastwickpark.co.uk to get online ratings of the practice from another site
https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice
I used this code snippet
<img src="http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/iwantgreatcarelogo.png" />
<div>
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
</div>
Then I used custom CSS in the themes stylesheet editor
.btn.blue,
div .btn.blue {
font-size: 16px;
padding: 8px 16px;
}
/*** Stars ***/
.sprite-icons.star-blue-outline {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-outline.png');
width: 19px;
height: 17px;
}
.sprite-icons.star-blue-fill {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue.png');
width: 19px;
height: 17px;
}
.sprite-icons.star-blue-half {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-half.png');
width: 19px;
height: 17px;
}
.sprite-icons.caret-white {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/caret-white.png');
width: 10px;
height: 14px;
}
I've got a problem with my CSS in that the button "wraps".
Tried to just get the star rating targeting the class "raty-rating-wrapper-readonly" part but then I get a whole load of vertical stars.
i.e. if i use
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".raty-rating-wrapper-readonly" basehref="1" ]
I get a whole vertical list of 5 * images?
If I use image-middle div like this
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
I get a weird wrap on the button.
Can't figure this out, and have to admit I'm not a CSS guru. Any insight would be gratefully received.
I've got a problem with my CSS in that the button "wraps"
The cause of the wrapping behaviour is due to <br> tag dynamically generated by WordPress. You can either fix it by following the guideline here: Stop WordPress automatically adding <br> tags to post content
The above post is a plus for you because it also removes the <p> tags that are dynamically generated. I just browsed through your code and found a lot of unwanted p tags.
Can't figure this out, and have to admit I'm not a CSS guru. Any
insight would be gratefully received.
Since you hinted for a CSS solution, a simple fix is to hide the br tags using #widgets .textwidget br { display: none; }. Alternatively #widgets .textwidget a { display: inline-flex; align-items: center } fixes the space and aligns the arrow image as the br tag is ignored inside and initial direction of flex is row.
Unwrapped button: