htmlcssformssticky-footer

Control gap between button, field input in sticky form

I build a sticky form which fixed at bottom position on the page.

I want to reduce gap in this sticky form:

  1. between input and button

  2. between button and frame

  3. between input and frame

current code link: 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; 
}

enter image description here thank you

Solution

  • You can reduce the gap by simply deleting these two classes w3-padding-16 w3-section.

    Deleting w3-padding-16 will let you to reduce gap

    1. between input and button and 3. between input and frame ,

    while deleting w3-section will reduce gap

    1. between button and frame

    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;
}
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<div class="gap"></div>

<div class="stickybottomform">
  <div class="w3-center" 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-center fas fa-shopping-cart fa" type="submit" value="stickyformsubmit">Submit</button>
    </div>
  </div>
</div>