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)

<title>Lalala</title>
<body>
<form action="/your-server-side-code" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="a public key"
data-amount="1000"
data-name="Lalala"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-zip-code="true"
data-currency="eur">
</script>
</form>

</body>


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?

Thanks!

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