jlo jlo - 1 year ago 99
CSS Question

How to avoid Stripe's 'Pay with card' button style to get screwed up with HTML5up's css?

I'm using one of html5up.net's templates and when I add a stripe 'Pay by card' button, it's overridden by the css of html5up (see both jsfiddles below). I tried going through the css file and see if there's anything I could change to affect the button's appearance to no avail (the file is absolutely massive and I could use some steering from more experienced heads).

Jsfiddle of how the button is supposed to look like (no css loaded)

<form action="/your-server-side-code" method="POST">
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="a public key"


Jsfiddle of how it looks like with HTML5up's css, which is the same code as before plus this line:

<link rel="stylesheet" href="main.css" />

My question: Is there any simple way that I can have just the button be exempt from the css that I have loaded for the site? If not, how would you go about accomplishing that? A new class that has default settings in the css file?


Answer Source

Line 1897 of your CSS is describing styles applied to the buttons.

If you remove line 1923:

height: 3.75em;

It will look kind of ok (or just delete whole section from 1897 to 2050 and you will be fine).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download