Eliminate extra spacing in the panel-footer on mobile devices

Trying to eliminate the empty space displayed below the footer in mobile mode, and ensure it stretches to fill the width automatically. I have included some script-related code for reference, but omitted it as it is more logic-based and not design-related.

Here is the CSS code snippet I am utilizing:

<style>
    .button {
        background-color: deepskyblue;
        border: none;
        color: white;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        cursor: pointer;
        margin: 10px 25px 0px;
    }

    /* Additional styles go here */

</style>

Click here for a visual representation.

htmlcssasp.netbootstrap-4webforms

Answer №2

Implement these CSS classes for the primary container.

  • d-flex: to apply flex properties
  • flex-column: to change the direction to a column.
  • h-100: to set a height of 100%.

Utilize these CSS classes for the main row.

  • flex-grow-1 & flex-sm-grow-0: to make it take up all available space on mobile devices only. This ensures the footer sticks to the bottom of the page. If you want the sticky footer across all screen sizes, use only flex-grow-1

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container d-flex flex-column h-100">
  <div class="row flex-grow-1 flex-sm-grow-0 ">
    <div class="col-md-6 col-md-offset-3 mob-horizontal mob-vertical" style="margin-top: 5em;">
      <div class="panel-group text-sm-center">
        <div class="panel panel-info">
          <div class="panel-heading text-center">/*content here*/</div>
          <div class="panel-body mob-horizontal">/*content here*/</div>
          <div class="panel-footer text-center">/*content here*/</div>
        </div>
      </div>
    </div>
  </div>
  <footer class="footer bg-danger">
    <div class="container">
      <span class="text-muted">Place sticky footer content here.</span>
    </div>
  </footer>
</div>

Ensure both html and body have a height of 100%. Apply h-100.

There are various methods to achieve a sticky footer, you can also refer to this answer.

Bootstrap also provides a similar footer implementation. Check out getbootstrap

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

glyph containing an undesirable space filled in

I have a character that I want to draw. The outline is correct but the filling isn't showing up as expected. Take a look at the comparison below (1. is what I want, 2. is what I currently have): c.beginPath(); //draw the curves c.closePath(); c.fi ...

javascripthtmlcanvasfontsfill

Can an image be inserted at the top left corner of a div's border by cropping the border?

I'm struggling to replicate a specific image design where the border cuts off within a certain distance. Despite my best efforts, I can't seem to achieve the desired cut-off effect for the border. Below is the HTML code for the quote and image: ...

htmlcss

Unlock the Full Potential: Enabling Javascript's Superpowers through PHP Execution

I specialize in PHP and JavaScript. Currently, I am attempting to incorporate JavaScript functionalities into my PHP code. However, I am encountering an issue where the code is not functioning properly. The PHP code that executes the JavaScript code is as ...

javascriptphphtml

modify pseudo element's style in Angular based on a particular condition

I am trying to change the style of :before based on a condition. I attempted to implement the solution provided at , but it did not work as expected. Here is my code: .sender:before { content: ""; width: 0px; ...

htmlangularsass

Is there a method in JS/jQuery to fill my input field with a constant string and ensure leading zeros are included?

I am looking to create an input textbox that starts with a fixed string followed by up to 6 leading zeros. As the user types in the input box, the leading zeros will be automatically removed once the maximum length of 6 characters is reached. The initial s ...

javascripthtmljquery

Does the color of the item change as it gets older?

How can I smoothly transition a color as it ages using a dynamic time scale? I want to calculate the age based on the difference in time rather than triggering an animation after an event. I aim for a seamless gradient transition between two colors over a ...

javascriptjqueryhtmlcss

Locate all hyperlinks that begin with a space character

I am attempting to locate all hrefs that belong to an 'a' element and begin with 'start/of/link'. I experimented with the following code snippet after discovering it as a resolution to a related question, however, it was ineffective. hr ...

pythonhtmlbeautifulsoup

Guidelines for toggling text visibility based on a randomly generated number with if statements in vanilla JavaScript

I am currently attempting to showcase some intricate text alongside an image once a button is clicked. At the moment, I have successfully implemented the functionality to display a random image when the button is clicked. However, I am encountering diffic ...

javascripthtmlif-statementrandomdisplay

Complicated scenario involving distinct identifiers and dynamically generated items

I am facing an issue with a button that, when clicked, adds a new media item to a list. The problem is that it uses unique IDs that end up getting duplicated. I am looking for a solution to add some kind of anonymous number to the ID to prevent duplication ...

javascriptjqueryhtml

What is the best method for creating uniform cards with different amounts of text that won't cause overflow issues?

At the moment, I have a container that acts as a boundary for a group of cards: .cards-container { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; margin-top: 20px; border: 5px solid violet; } .card { ...

htmlcssreactjs

Calibrating height using CSS

Within my HTML document, I have the following structure: <div id="content"> <div id="wrapper"> <div id="steps"> <form id="formElem" name="formElem" action="" method="post"> <fieldset class ...

csshtmlheightfieldset

What are the steps for utilizing a button instead of an input field that is not within a form?

I need assistance with setting up a navbar with a button that will submit a form in the body with the ID of album_form. Can anyone provide suggestions for what to include in the onclick attribute to achieve this functionality? <body> <header& ...

javascripthtmlforms

Modify the design of the button in the CSS code

I am facing an issue with the layout of the Visible Columns button and unable to standardize it like the buttons above using CSS enter image description here The code snippet for the Visible Columns button is as follows: import React, { useState, useEffe ...

javascripthtmlcssreactjs

IE Flash overlay is causing compatibility issues with the website

I'm working on a website that has a flash player embedded, and I'm trying to add an overlay that can display HTML content. The plan is to have the flash element fade out to 0.5 opacity before showing the HTML text. It works perfectly in Google Ch ...

jquerycssflash

Issue with the text wrapping of Angular mat-list-option items

When the text of my checkboxes is too long, it doesn't wrap properly. Please see the image below for reference: Click here to view Checkbox image and check the red box Here is my HTML code: <mat-selection-list #rolesSelection ...

htmlcssangular

Creating a clickable color-changing grid: A step-by-step guide

In a grid of size 12 by 12, each corner will be clickable, selecting a 6x3 cell area starting from the corner. The selected cells will change color upon clicking any of the 4 corners. After selecting one corner, the remaining cells (126 cells) will be che ...

javascripthtmlhtml5-canvas

Determine the position of an element in relation to a specific ancestor using JavaScript

Let's consider the following example of HTML code: <div id="site_header_container" class="site_bar_container"> <div id="site_header"> <div id="header_logo_container"> <a class="sliced" id="header_ ...

javascripthtmlcss

What is the best way to conceal an HTML element on a particular page that is already styled as (visibility: visible), but only if its child has a specific class assigned to it?

I have a grid of content and posts displayed on multiple webpages. Users can select specific items from the grid to navigate to more detailed information on another page. Each webpage has its own grid which I want to filter based on a specific class. The ...

javascripthtmljquerywordpresslearndash

Using jQuery to replace the content of a div with a delay?

I am attempting to utilize jQuery to create a fade effect on an element, replace its innerHTML content, and then fade it back in once the new content has been added. I have successfully managed to replace the element's content using the .html() method ...

javascriptjqueryhtmlcssinnerhtml

What could be causing the HTML and CSS to not show the background image?

Hey, I'm new to html and css and I'm having trouble getting a background image to show up on my website. All I see is "first website" in the corner but the image isn't displaying. Here's the code I have: * { margin: 0; padding: 0 ...

htmlcss