Bootstrap Inconsistency: Unnecessary spacing on the right side of the page

The navigation bar is overflowing the viewport on smaller devices, as observed on a personal device and in Chrome developer tools.

From 575px onwards, there is increasing whitespace on the side of the screen, with content occupying only 25% at its smallest point. The remaining 75% is white space. How can I resolve this issue? Thank you!

< script src = "https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity = "sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin = "anonymous" > < /script>

  <
  script src = "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed9d829d9d889fc3879eaddcc3dcdbc3dd">[email protected]</a>/dist/umd/popper.min.js"
integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" > < /script>

  <
  script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity = "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin = "anonymous" > < /script>
body {
  position: relative;
}

h3 {
  text-align: center;
}

nav {
  position: inherit;
}

#home {
  background-image: url(jumbotronNewResized.jpg);
  text-align: center;
  margin-top: 55px;
  background-size: 100%;
  background-repeat: no-repeat;
}

#lowerJumbotron {
  color: white;
}

i {
  padding-right: 8px;
}
<!doctype html>
<html lang="en">

<head>
...
</html>

Visit Website With Extra Whitespace On Small Screens

cssbootstrap-4widthnavbar

Answer №1

The problem does not lie in the navigation, but rather with the horizontal ruler <hr> having a width set to 100%. To fix this issue, you can add the following CSS:

hr.container {
    width: auto;
}

Here is a complete working code snippet:

body {
  position: relative;
}

h3 {
  text-align: center;
}

nav {
  position: inherit;
}

#home {
  background-image: url(jumbotronNewResized.jpg);
  text-align: center;
  margin-top: 55px;
  background-size: 100%;
  background-repeat: no-repeat;
}

#lowerJumbotron {
  color: white;
}

i {
  padding-right: 8px;
}

hr.container {
  width: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="fontawesome-free-5.11.2-web/css/all.min.css" rel="stylesheet">

<!-- Rest of the HTML code for the webpage -->

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

Implementing a blur effect on a CSS loader

I have successfully implemented a loader feature where a loading animation is displayed upon clicking the submit button, indicating that the form submission is in progress. However, I am encountering an issue when trying to apply a blur effect to the entir ...

javascripthtmlcss

Retrieve the values of the children within a div tag

Hello there, I am attempting to retrieve all the child values from the parent div .clonedInput when the .send button is clicked. I also want the output to be formatted as shown below and placed in a temporary alert(); variable for code confirmation. //Exa ...

jqueryhtmlcss

What is the best method for choosing a div element using JavaScript and altering its background color?

On my website, I have a pop-up modal with a form that contains 5 divs, each with a picture and description. I came across this JS code on w3schools that allows me to style a selected div. However, when the modal is opened, one of the divs is already pre-se ...

javascripthtmlcss

Gentelella Bootstrap Template - Textbox

Has anyone used the gentelella admin template before (https://github.com/puikinsh/gentelella)? I am attempting to utilize the textarea feature from this template , but it does not allow me to save data to the database. The contents will be inside the div a ...

textareatoolbarbootstrap-4gentelella

What is the best way to enable editing of a form when the edit button is clicked?

I have created a simple profile page where users can edit their profile information. I have placed a button at the end of the page. Initially, the form should be uneditable, but when the button is clicked, the form becomes editable. I attempted to use `dis ...

javascripthtmlcssvue.js

Using SCSS based on the browser language in Angular: A Step-by-Step Guide

Is there a way to implement SCSS that is dependent on the user's browser language? When I checked, I found the browser language specified in <html lang = "de"> and in the CSS code as html[Attributes Style] {-webkit-locale: "en&quo ...

cssangulartypescriptsass

The CSS float puzzle - text alignment dilemma

Recently, I created a simple float-based banner with tiles which you can see here on jsfiddle. However, I encountered a major issue with centering text in each tile. My goal is to have all the "Sample text" content centered both horizontally and vertically ...

htmlcss

Transferring information from template to associated component

Is it possible to transfer data from a template to a component without the need for an event trigger like a button or form submission? For instance, in the code snippet provided, how can we pass the 'item' from the 'items' array to the ...

htmlcssangular

Optimizing website layout for mobile devices

I have a website with a fixed page layout at . It displays properly on desktop browsers but not on mobile devices. The website is adjusting to fit the browser size, but some components are changing format. Can anyone offer assistance? Thank you! ...

htmlcssfixed-widthpage-layout

Seeking assistance with my personal portfolio project - any takers?

I'm facing an error on a coding challenge that says: "The height of the welcome section should be equal to the height of the viewport." I have set it to 100vh but I'm unsure how to resolve it. Here is the HTML code: <header> <nav id=& ...

htmlcss

Is there a way to apply -webkit-line-clamp to this JavaScript content using CSS?

i have a random-posts script for my blogger website <div class="noop-random-posts"><script type="text/javascript"> var randarray = new Array(); var l=0; var flag; var numofpost=10; function nooprandomposts(json){ var total = ...

javascriptcssblogger

What are some effective ways to utilize CSS translateZ?

I'm attempting to create a new layer of content with CSS, but I'm having trouble adjusting the depth of the element using the translateZ property. I tried using some codepen code to achieve a 3D effect. Below is the HTML, CSS, and Javascript cod ...

htmlcss

Modify the default background color for the chosen element in the tree structure

Could someone assist me in changing the default background color of a selected element in the tree? Below is the XHTML code: <style type="text/css"> .ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state- ...

cssprimefaces

Hover over the image to trigger animation effects

Looking for a way to enhance my current jQuery script that creates an orange transparent hover effect over images. How can I add animations, specifically a fade in and out effect? $(document).ready(function() { $('#gallery a').bind('mo ...

jqueryhtmlcssjquery-uijquery-animate

Previewing multiple images with multiple file inputs

I am trying to find a way to preview multiple images uploaded from different inputs. When the button is pressed, the content from a textarea containing <img src="$img" id="img1"> is written inside a div called seeimg. The IDs for these images range f ...

javascriptjqueryhtmlcss

Ways to expand logo space within the header of the Twentysixteen Theme on WordPress

I am facing an issue with my logo being resized to a much smaller size of 200px even though it is originally over 2000px wide. In the style.css file, I found the following code: .custom-logo { max-width: 180px; } Despite changing the max-width value t ...

phpcsswordpress

Generate three separate inline blocks and position elements within them without any impact on the neighboring blocks

In my attempt to create three blocks with set height and width, aligned on top/bottom with a couple of elements inside each one, I encountered an issue. Whenever I add additional DIVs to one of the elements (resulting in a different number of DIVs inside e ...

htmlcsstwitter-bootstrapbootstrap-5

Unable to insert additional lines into diamond shape generated solely with CSS

Is there anyone out there who can assist me in creating this logo using CSS? View the image of the logo here I initially attempted to make a square with width and height, followed by experimenting with pseudo elements. However, I hit a roadblock because ...

htmlcss

What could be causing flickering when animating CSS translate on a black background in WebKit?

Upon viewing the jsfiddle, it's evident that this animation experiences flickering in webkit browsers. Regardless of whether the animation is set to repeat infinitely or not, the issue persists. How can this problem be resolved? I've spent hours ...

cssgoogle-chromecss-animationscss-transforms

Struggling to customize Vuetify styles with my own stylesheet

In my current project, I am utilizing Vue2 and Vuetify. One of the main challenges I am facing is that my Vuetify styles are always imported after my own custom styles. I attempted the following: App.vue <template> <v-flex> <v-c ...

cssvue.jsvuejs2vuetify.js