Adjust the spacing between the button and input field in a fixed position form

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?

  1. between the input field and the button

  2. between the button and the frame

  3. 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

Answer №1

To minimize the spacing, consider removing the w3-padding-16 and w3-section classes.

Eliminating w3-padding-16 will decrease the distance

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

While removing w3-section will lessen the 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Piechart in Kendo UI that is bound to hierarchal remote data

I am facing an issue with binding remote data to a pie chart while managing a grid with dropdown sorting options. The grid is working fine, but I am unable to display the hierarchical data on the pie chart as categories. <!DOCTYPE html> <html> ...

The outerHeight of Elements measured in pixels

Is there a way to increase the outerHeight() function by adding extra pixels? Let's say we have a variable storing the outerHeight of .pg-sect: var $section = $('.pg-sect').outerHeight(); Now, if I want to add an additional 70px to the he ...

Guide on retrieving a file through an HTTP request with restricted cross-origin access restrictions

Having some issues with downloading files from specific links, such as . My goal is to automate the download process for these redirected files. The challenge I'm facing is that trying to access the link directly through a web browser just gives me a ...

How can you trigger CSS transitions to happen multiple times?

Currently, I have a basic circular logo that rotates 360 degrees when certain ajax functions are triggered. While this works as intended, the rotation only occurs once after the function is triggered, and I need to reload the page for it to happen again. ...

Attempting to extract information from a webpage that contains multiple data tables, but encountering an issue where only the first table is successfully scraped

For my current project, I am attempting to extract data from basketball players' profiles on Basketball-Reference. Each player page on B-R contains several tables of valuable information that I need to access. However, when trying to extract the table ...

Building a custom HTML and JavaScript player to showcase multiple videos on a webpage

UPDATE: The solution has been discovered, shared, and marked as the top answer below. In the process of creating my portfolio website using HTML, CSS, and JS, I encountered a challenge regarding the addition of multiple videos on various pages. While fol ...

Rearranging the Foundation Grid by incorporating smaller panels ahead of larger panels

I am in the process of designing a visually appealing webpage with no text other than captions. To achieve the desired look, I aim to have each clickable box display in a unique size. Here is the layout I envision: __________________________ | ...

Capture screenshots of the web page URLs within the Chrome browser by utilizing PhantomJS

Looking for a way to capture screenshots of various URLs and display them in the Chrome browser using PhantomJS. How can I achieve this? Any assistance would be greatly appreciated, as nothing is currently showing up on the webpage. This is how my code a ...

Arrange three input fields horizontally with labels positioned above each

I am facing a minor problem with aligning three input fields in the same row while maintaining equal spacing between each of them. I attempted to accomplish this using display: flex and space-between, but then the label appears to the left of the input in ...

Attempting to design a customized dropdown navigation feature using HTML

I am having some trouble creating a dropdown menu that functions properly. Here is the code I have written: <div> <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A Subject:</H1> <select id ="dropDownId"> <!-- as ...

Sending a variable to a template in AngularJS

I am looking for a way to pass a variable or text to a template in order to display the value within my template. While browsing through resources, I found an example on jsFiddle that demonstrates this functionality using ng-repeat. However, I am curious ...

Creating two div elements next to each other in an HTML file using Django

I'm having trouble arranging multiple divs in a single line on my website. Utilizing float isn't an option for me due to the dynamic number of divs generated by Django posts. Here is the code I am currently using: Index.html <!DOCTYPE html&g ...

I am attempting to secure a webpage with a password using JavaScript

I've been working on adding password protection to my webpage at , with the goal of allowing users to enter the password once per session. However, I've encountered an issue: if a user cancels out of the initial prompt or enters the wrong passwor ...

the div background is limited to the exact size of the text, not filling the entire

Currently, as I work on my web page using react.js, I'm facing the challenge of implementing a full-size background. Despite my efforts, the background only occupies the size of the text within the div. Here is the snippet of code I am working with: a ...

What is the solution to adding values from a counter?

I am trying to create a JavaScript counter: function animateSun() { var $elie = $("#sun"); $({ degree: 0 }).animate({ degree: 360 }, { duration: 190999, easing: 'linear', step: function(val) { now = Math.round ...

guidelines for quotes in playframework templates

Looking at the tutorial on Playframework's website, the instructor demonstrates a simple example and eventually includes a javascript (coffeescript) file for creating a dynamic list. In the index.scala.html template file, he adds this code: <scri ...

When attempting to execute a function when a hidden div is not displayed, JQuery encounters an

I'm currently attempting to modify the text color of the h2 title with the id ticketSearchTitle when the ticketSearch div is not visible. However, the code I have been using to achieve this seems to cause issues (such as the absence of a pointer icon ...

unable to display dropdown menu from Django model in HTML view

I'm in the process of creating a Django application and I want to implement a feature where users can choose a [team_number] from a dropdown menu. Once they submit their selection, they should be redirected to a page that displays the relevant informa ...

What is the method for copying table data, including input text as cells, to the clipboard without using jQuery?

I have a basic table that looks like this: <table> <thead> <tr> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>Savings <button type="button" (click)=" ...

The Popover in Twitter Bootstrap disappears beneath the navigation bar

I have a help button located in my navigation bar that triggers a popover feature. <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <div class="nav pull-right"> ...