I found this finally… CSS – Why am I not able to set height and width of <a href> elements? and as it states…
“As the others have said, by default is an inline element, and inline elements can’t specify a width or height. You can change it to be a block element like this”:
a {
display: block;
}
Though it will then display (unsurprisingly) as a block, sitting on its own, outside the flow of the surrounding text. A better solution is to use display: inline-block which might be a best-of-both-worlds solution depending on your situation.
a {
display: inline-block;
}
Height won’t have any effect on that <a> tag as it has a display of inline, so you simply need to change its display to something like inline-block to make it obey the set height, like
#fjButton2 {
box-shadow: 0 1px 3px 0 #dce0e6;
font-family:'Fjalla One', sans-serif;;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
height: 14px !important;
width: 30%;
padding: 5px;
font-size: 16px;
text-decoration:none;
margin: 0px;
display:inline-block;
}
Hope it helps.
I have an HTML page with embedded CSS styling. It has a form with an input button that says “Submit Payment” using #fjButton and height of 54, which gets obeyed. I also have an that has an id #fjButton2 with a height of 14… both set to !important. The #fjButton2 doesn’t get obeyed. Im’s sure it’s some stupid thing, but i just can’t figure it out… the stays at 32px no matter what i do. See it at:
https://codepen.io/johnstonf/full/YzwGqNO
<!DOCTYPE html>
<html>
<head>
<title>Test-Store</title>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Inter&display=swap" rel="stylesheet">
<!-- Landing page styling -->
<style type="text/css">
body{
background-color: #f2f4f9;
}
h3, h5{
font-family: 'Fjalla One', sans-serif;
font-weight: 100;
}
h3{
font-size: 36px;
}
h5{
font-size: 24px;
}
p, label{
font-family: 'Inter', sans-serif;
}
hr{
color:#fff;
background-color: #fff;
border-top:1px solid #fff;
margin-top:10px;
margin-bottom: 10px;
}
#container{
width:1200px;
margin:0 auto;
padding-top: 3%;
}
.column-6{
text-align: center;
width: 50%;
float:left;
}
#left-wrapper{
background-color: #72cca7;
box-shadow: 0 1px 3px 0 #dce0e6;
border-radius: 14px;
border: 3px solid black;
margin-right: 14px;
margin-top: 14px;
padding: 13px;
}
#right-wrapper{
padding-top: 13px;
margin-top: 13px;
border-radius: 14px;
border: 3px solid black;
margin-right: 14px;
background-color: #72cca7;
box-shadow: 0 1px 3px 0 #dce0e6;
border-radius: 14px;
border: 3px solid black;
margin-right: 14px;
margin-top: 14px;
padding: 13px;
}
#profile-pic{
width:200px;
display:block;
margin: 0 auto;
border-radius: 50%;
float:left;
}
#left-wrapper-header{
min-width:50%;
float:left;
padding-left:20px;
}
#left-wrapper-header h3{
color:#fff;
}
#right-wrapper h3{
color: #10a195;
}
.Z9999{
margin-left: 1px;
width: 99%;
}
/* ------------------------ FORM FIELDS ------------------------ */
.form-field-12{
width: 100%;
margin-bottom: 6px;
padding-top: 3px;
}
.form-field-6{
width: 50%;
float:left;
margin-bottom: 1px;
}
select{
width: 100%;
height: 25px!important;
box-shadow: 0 1px 3px 0 #dce0e6;
padding: 1px 2px;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
font-size: 20px;
color: #44464a;
}
input{
box-shadow: 0 1px 3px 0 #dce0e6;
height:40px;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
width: 95%;
padding: 5px;
font-size: 16px;
}
input::placeholder {
color: #9fa1a6;
}
/* ------------------------ BUTTON STYLING ------------------------ */
#fjButton {
box-shadow: 0 1px 3px 0 #dce0e6;
font-family:'Fjalla One', sans-serif;;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
height: 54px !important;
width: 30%;
padding: 5px;
font-size: 16px;
text-decoration:none;
margin: 0px;
}
#fjButton2 {
box-shadow: 0 1px 3px 0 #dce0e6;
font-family:'Fjalla One', sans-serif;;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
height: 14px !important;
width: 30%;
padding: 5px;
font-size: 16px;
text-decoration:none;
margin: 0px;
}
.myButton:hover {
opacity: .6;
}
@media screen and (max-width:1200px){
#container{
width:80%;
}
.column-6{
width: 100%;
}
}
@media screen and (max-width:800px){
#container{
width:100%;
}
.Z9999{
margin-left: 20px;
width: 100px;
}
}
</style>
<!-- Success page styling -->
<style type="text/css">
h4{
font-family: 'Fjalla One', sans-serif;
font-weight: 100;
font-size: 24px;
}
#box{
max-width: 500px;
margin:0 auto;
margin-top: 100px;
padding:30px;
background-color: #fff;
text-align: center;
box-shadow: 0 1px 3px 0 #dce0e6;
border-radius: 4px;
border: 1px solid transparent;
}
.myButton {
background-color:#72cca7;
background-color:#26367e;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:17px;
padding:10px;
width:30%;
border-radius: 0;
text-decoration:none;
text-align: center;
transition: .3s;
}
.myButton:hover {
opacity: .6;
}
#succes-icon{
width: 100px;
}
</style>
</head>
<body>
<style type="text/css">
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
</style>
<script src="https://js.stripe.com/v3/"></script>
<div id="container">
<div class="column-6">
<div id="left-wrapper">
<img id="profile-pic" src="{% static 'images/logo-20may29.png' %}">
<div id="left-wrapper-header">
<h3>Item Purchase</h3>
</div>
<div style="clear:left"></div>
<hr>
<!-- Add form here -->
<form action="{% url 'charge' %}" method="post" id="payment-form">
<div class="form-field-12">
<label for="amount"><b>Pick a product from this dropdown:</b></label>
<select required name="amount" id="amount">
<option selected value="1">$1 CAD ------> TEST</option>
<option value="1">$1 CAD -----> 1 item</option>
<option value="2">$2 CAD -----> 2 items</option>
<option value="3">$3 CAD ----> 3 items</option>
<option value="4">$4 CAD ----> 4 items</option>
<option value="5">$5 CAD ---> 5 items</option>
</select>
</div>
<div class="form-field-6">
<label for="email"><strong>* Enter your email address:</strong></label>
<input required type="email" name="email" placeholder="* email...">
</div>
<div class="form-field-6">
<label for="username"><strong>* Desired username / login name:</strong></label>
<input required type="text" name="username" placeholder="* username...">
</div>
<div class="form-field-6">
<label for="email"><strong>Enter your Dogs name:</strong></label>
<input type="text" name="dog" placeholder="Dogs name...">
</div>
<div class="form-field-6">
<label for="email"><strong>Enter your Favorite beer:</strong></label>
<input type="text" name="beer" placeholder="Favorite beer...">
</div>
<div class="form-field-6">
<label for="country"><strong>* Enter your Country:</strong></label>
<input required type="text" name="country" placeholder="* Country...">
</div>
<div class="form-field-6">
<label for="phone"><strong>* Enter your phone number:</strong></label>
<input type="tel" id="phone" name="phone" placeholder="* Phone..."
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
<small>Format: 123-456-7890</small>
</div>
<div class="form-row">
<label for="card-element">
<strong>Credit or debit card</strong>
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert">
</div>
</div>
<div style="clear:left">
</div>
<hr>
<input id="fjButton" style="background-color:#10a195;height:12px" type="submit" value="Submit Payment" name="">
<hr>
<a href="https://opp.ca" target="_blank" id="fjButton2" style="background-color:#10a195; height:77px" >OPP Homepage</a>
<br><br><br><br>
</form>
</div>
</div>
<div class="column-6">
<div id="right-wrapper">
<img class="form-field-12" src="{% static 'images/Z9999.png' %}">
<h3> We appreciate you!</h3>
<hr>
</div>
</div>
</div>
<script>
// Create a Stripe client.
var stripe = Stripe('pk_live_blahblah');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
// Submit the form with the token ID.
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
</script>
</body>
</html>
