gap between the main content and the anchored bottom navigation

Working on a homepage using Bootstrap 4 with a navigation bar fixed to the bottom and a carousel above it. It looks good on desktop/tablet, but facing issues on mobile views.

There's an unwanted white space between the carousel and the navigation on mobile devices. How can I remove this gap?

Attempted a solution using media queries, but it didn't solve the issue.

@media only screen and (max-width: 576px) {body {overflow: hidden;}

Here is the fiddle for reference: https://jsfiddle.net/wb13o8nv/13/

Requesting assistance to resolve this problem. Thank you.

Answer №1

Enclose the entire navigation and carousel within a container with a class of position-relative. Ensure that your navigation has a class of position-absolute.

https://jsfiddle.net/d5ymv12q/

Answer №2

In order to solve this issue, my suggestion is to utilize the images from the slideshow as the background image for each carousel-item.

CSS

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.sliderCarousel {
  width: 100%;
}
.sliderCarousel .carousel-item {
  width: 100%;
  background-position: center;
  background-size: cover;
}

HTML

<!DOCTYPE html>
<html lang="en>
  <head>
    <title>Example of a Bootstrap 4 Website</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="./style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
      <a class="navbar-brand" href="#">Navbar</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#collapsibleNavbar"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
      </div>
    </nav>

    <div
      id="carouselExampleIndicators"
      class="carousel slide sliderCarousel"
      data-ride="carousel"
    >
      <ol class="carousel-indicators">
        <li
          data-target="#carouselExampleIndicators"
          data-slide-to="0"
          class="active"
        ></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner h-100">
        <div
          class="carousel-item h-100 active"
          style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
        ></div>
        <div
          class="carousel-item h-100"
          style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
        ></div>
        <div
          class="carousel-item h-100"
          style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
        ></div>
      </div>
      <a
        class="carousel-control-prev"
        href="#carouselExampleIndicators"
        role="button"
        data-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a
        class="carousel-control-next"
        href="#carouselExampleIndicators"
        role="button"
        data-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-md-12">
          Random text goes here.
        </div>
      </div>
    </div>

    <script src="./script.js"></script>
  </body>
</html>

JavaScript

$(document).ready(function() {
  var setCarouselHeight = function() {
    $(".sliderCarousel").height(document.documentElement.clientHeight);
  };
  setCarouselHeight();
  $(window).resize(function() {
    setCarouselHeight();
  });
});

Utilizing JavaScript to calculate the viewport height and adjust the carousel accordingly.

Link to Functional Fiddle

Answer №3

Is this similar to what you need?

<div class="min-vh-100 overflow-hidden">
      Carousel content goes here
      <img class="d-block h-100" src="https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80" alt="Second slide">
    </div>
    <footer class="sticky-bottom">Insert your navigation items here</footer>

I'm unable to provide a complete code snippet as I am currently using my phone. I hope this helps to some extent.

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

Align the date input field to the center for better visual appeal

I am facing a challenge in centering the date in an input, not the entire input element inside a div. When I attempt to center it, the date gets positioned within a portion of the input due to a resizable right-hand side panel for selecting a date from a c ...

Utilize jQuery to swiftly align elements within a designated container

Check out my JSFiddle example: http://jsfiddle.net/c62rsff3/ I'm attempting to implement snapping behavior between 2 elements using this code: $('.draggable-elements').draggable({ snap: true }); In addition, I've defined a container ...

Minimize the size of the MUI date selector widget

I've been incorporating the MUI date picker into a data list, but I'm looking to decrease the height of the input field and adjust the positioning of the close date and calendar icons. They're currently taking up too much space between them ...

The inclusion of float: left disrupts the formatting of the list

My webpage features a visual element known as a "plan", which consists of a small table and an image. I want these two elements to appear side by side without any styling. Currently, they are displayed one below the other. You can view how it looks like he ...

What is the best way to position a DIV class on top of another DIV class in a specific location?

I have successfully implemented a simplistic bar chart using CSS and HTML. The chart comprises two DIV classes: one for the background bar and another for the front bar. The heights of these bars are dynamically set based on percentage values passed from P ...

Tips for keeping the scroll position of a bootstrap table when reloading the page

Displayed below is a bootstrap table with specific features. <div class="row"> <table id="question-selection" class="table table-sm table-hover table-wrapper"> <tbody> {% for placer in chapter_questions %} ...

Currently, I am experiencing difficulties with two specific aspects of the website I am working on - the hamburger menu and the slideshow feature

I'm having trouble with the menu on my website. It's not functioning as expected - the dropdown feature isn't working, and two items are not staying in the correct position under the parent ul despite attempts to position them using CSS. Add ...

What is the best way to maintain consistent scaling for elements of varying widths and heights?

I'm searching for a method to evenly scale my elements regardless of their width and height. I don't want them to be proportional to their size. Check out the JSFiddle version body, html { height: 100%; width: 100%; margin: 0; backgro ...

Creating an unordered list (ul) with list items (li) that extend the full width

Having trouble making my list items (li) from the unordered list (ul) stretch across the page like the navigation bars on websites such as Verragio and James Allen. Can someone assist me with this? Here is a basic example of a nav hover bar. .dropdown-b ...

When you click, transfer a single item from one array to another and modify the text according to the items in the array

How can I dynamically update a shopping cart feature on my website when a user clicks on the "addtocart" button? I want to create functionality where clicking on the button adds the corresponding product to the cart array, and updates the cart amount displ ...

Finding an element that lacks both a class and an id, and is not consistently present - what's the trick?

Currently, I am faced with a predicament in my code where a <li> element only appears under specific conditions, making it difficult to apply positioning. This element lacks an id and class attribute, which prevents me from targeting it accurately us ...

Click on a div to switch between displaying an arrow pointing to the right and an arrow

Currently working on a design for an accordion-style layout and looking to implement toggling arrow icons when the div is clicked. I have managed to toggle the content of the div successfully, but now seeking assistance in achieving the same functionality ...

"Creating eye-catching popup images in just a few simple steps

<div className="Image popup"> <Modal isOpen={modalIsOpen} onRequestClose={closeModal} contentLabel="Image popup" > <img src="../img/navratri-1.png" alt="Image popup" /> <b ...

Quiz application utilizing MySQL and JSP technology

I've been developing a Web Application using JSP to host MCQ quizzes. The questions are stored in a MySql Database table called 'qna', with each question having 10 choices. My goal is to design the quiz so that each question appears on a new ...

Calculate the total with the applied filters

My goal is to sum the data from the Number table after applying lookup filters. The current issue is that the sum remains fixed for all values and doesn't take into account the filter. Here's the JavaScript function I'm using to search and ...

How to set the default value of a select dropdown in PHP

I came across this snippet of code: <td> <select class="versionSelect"> <option value="5" <?php if($item->version === "5") echo "selected='selected'"; ?>>5</option> <option value="6" <?php ...

Tips for formatting HTML to showcase two data cards when printing a page

My XML data input document can be neatly transformed into printable data cards, whether it's 2 to a page, 4 to a page, 9 to a page, or any other configuration. What is the most effective method for styling the data to fit the printing layout? How can ...

What is the proper way to integrate EJS tags within script tags in EJS files?

I am encountering an issue with the code in my index.ejs file from YelpCamp, which is a part of Colt Steele's course. const campgrounds = <%- JSON.stringify(campgrounds) %>; I attempted to fix it by changing the code to: const campgrounds = &ap ...

Issue with overflow:scroll displaying incomplete div contents

I am attempting to create a sidebar with a fixed position, featuring a small header and a scrollable content area below it. The issue I am facing is that I am unable to scroll through the entire content within the div, resulting in some parts being cut of ...

Formatting tables

Below is the table structure that I have. I attempted to insert empty tds divs in order to achieve the formatting shown in the image, but I have not been successful. Any suggestions or ideas would be greatly appreciated. <table border="0" cellpadding=" ...