I have created a sticky form that is fixed at the bottom of the page.
How can I reduce the gaps in this sticky form?
between the input field and the button
between the button and the frame
between the input field and the frame
Here is the link to the current code: https://jsfiddle.net/bvotcode/n0cp1Lyu/8/
HTML
<!-- Sticky form -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<!-- this div will give a gap of 30px -->
<div class="gap"></div>
<div class="stickybottomform">
<div class="w3-center w3-padding-16" style="margin-top:0px">
<div class="w3-row">
<form action="/action_page.php">
<div class="w3-row-padding"
style="margin:0 -16px 8px -16px">
<div class="w3-col"
style="width:50%;padding:2px">
<input class="w3-input w3-border"
type="text" placeholder="Name"
name="name" required/>
</div>
<div class="w3-col"
style="width:50%;padding:2px">
<input class="w3-input w3-border"
type="text" placeholder="Phone"
name="handynumber" required/>
</div>
</div>
</form>
<button class="w3-button w3-green w3-section
w3-center fas fa-shopping-cart fa"
type="submit" value="stickyformsubmit">
Submit
</button>
</div>
</div>
</body>
CSS
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem; }
p {
margin-top: 0;
margin-bottom: 1rem;
}
div.stickybottomform {
position: -webkit-sticky;
position: sticky;
bottom: 0;
border: 2px solid blue;
background-color: #e8e8e8;
padding: 10px;
font-size: 20px;
}
.gap{
width:100%;
height:3000px;
}
https://i.sstatic.net/1Zkkg.png thank you