I have installed Stripe on my WooCommerce Store. Upon testing I found that that Stripe checkout form input fields have very less width and they are coming from Strip Iframe.
I have tried adjusting it using CSS, but the width CSS is inline and coming from Stripe site.
Please recommend how can I fix it?
https://imgur.com/z0iH21Y "Screenshot"
Thanks
You are missing some styling elements in your woocomerce theme code, add this to your theme child or your custom theme css file
.stripe-card-group, div#stripe-cvc-element, div#stripe-exp-element {
width: 100%;
}
Related
I want to hide featured image on single post view. i tried with plugin and also theme panel have option to hide feature image but it did not work. I also add custom CSS code but did not work for me. Is any other way to hide featured image? Please help me to solve my issue.
I am using Newspaper theme (Version: 11.5.1).
Website: AmazClub
The page I need help with:
https://amazclub.com/airpods-pro-in-the-shower/
Try this custom CSS
.postid-894 .tdb_single_featured_image {
display: none;
}
The .postid-894 is a class that is applied to the specific post you linked, so the style wont be applied to other posts.
The .tdb_single_featured_image is the featured image element.
The display: none; will prevent the selected element from rendering in the page.
I'm setting up a new e-commerce website. And I've integrated Razorpay payments to the site for payment processing. It shows an image badge on the billing page that shows 'Payment by Razorpay'. I want it to be removed or hidden.
I tried to hide it via CSS but that image has CSS class, So I can't set it's CSS property to 'display: none;'
That badge is just an image, you can hide it by adding this CSS code below.
.wc_payment_method.payment_method_razorpay img {
display: none;
}
Suggestion: Please read the Razorpay policy before doing this.
Using the demo page on Razorpay, I think you can hide the button with this:
.pay {
display: none;
}
Original Page
With the CSS display:none
If this doesn't work for you, ¿Can you please provide the HTML/CSS of the page? Without that it is going to be difficult to help you in a specific manner.
Hope I'm in the right place. Been sent here from the hubspot forums for different help. I've got this site with hubspot forms, but they only display at a 1/3 column. I've placed both of the following codes into the style sheet of Oceanwp theme (havent needed a child theme yet, trying to avoid that, I only placed it here temporarily to see if it works before creating the child theme if needed). I also placed it in the css injectors in elementor in the element itself, and in hidden elements on the page in various places (trying to figure out when the columns get set as the page loads and trying to get in front of it). I'm not really great with css or html, but i do have rudimentary understanding of how they work, I just cant write it.
Heres one of my forms, and the two pieces of code I have tried. Please help!!
http://staging.safetybathtubs.com/contact/
.hbspt-form .hs-form fieldset {
margin: 0 auto;
}
.hs-form fieldset {
max-width: none!important;
}
I am using the Shopify plugin which inserts Shopify products into Wordpress. I am trying to hide the image that gets brought in via the shortode. I've tried css and jquery but can't get it to be hidden.
So link for example: http://dev.whydidibother.com/airdecksltd_09_09_16/shop/6-board-pod/ - it is the image directly above the title and price.
Thanks
Try adding the following CSS:
.product-embed__image {
display: none;
}
I'm working on a Wordpress site and I'm quite new to this framework. There's some CSS on my page that's causing each "row of content" to have a 35px margin between it. This appears to be in a css class called wpb_row in a js_composer.css file. I'm not sure if this is some standard CSS class for Wordpress or if there's a global "have margin between each layer of content" setting.
Unfortunately I don't have 10 rep so I can't post an image of the page that's causing the issue but I can link to an image of where the issue is http://i.imgur.com/vEyznRn.png?1 and the url for the site is http://am12.siteground.biz/~youbambu/ecorecycling/
What's the best way to override a CSS class within Wordpress from a standard point of view? I've tried adding custom css to override this and remove the margin-bottom: 35px; in Appearence->Editor->Stylesheet.
Is it possible to either override this CSS in one global area? I'm using a theme called Picasso in wordpress if that's any help, but I don't see how to override this CSS.
To overrride the css use !important. So adding the following to your stylesheet should remove the margin bottom:
.vc_row.wpb_row.vc_row-fluid {
margin-bottom: 0 !important;
}
Is it possible to either override this CSS in one global area? I'm using a theme called >>Picasso in wordpress if that's any help, but I don't see how to override this CSS.
I would be careful editing/modifying there because I suspect you will lose these changes/modifications on theme updates (which Picasso auto updates).
The theme has a designated place located at Theme Options > Tools > Custom CSS. The adjustments you add here are loaded on every page, just like the stylesheet in editor. Furthermore, these changes are not cleared upon update.
Just my two cents, hope it helps.
You can easily achieve this goal. This is not a WordPress standard or something.
you can edit js_composer.css and change what you want. OR
you can override this css rule adding a new role after js_composer.css loads. Something like:
<style>
.wpb_row { margin-bottom: 0px!important }
</style>