In the mobile view of the jumbotron, there is a noticeable blank area on the right side

I've searched high and low for a solution to this issue, but nothing seems to pinpoint the cause of the problem. The white space that's causing trouble is evident in the following image:

https://i.sstatic.net/95Rh6.jpg

Could you help me identify the source of this white space?

I've determined that the problematic area is located right after the jumbotron. Removing it eliminates the white space. Is there something off with my positioning or spacing that I'm missing?

    <!DOCTYPE html>
<html lang="de">

<head>
    <!-- Important Meta Data -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

... (the rest of the HTML code)... 

body,
p {
    font-family: 'Spectral', serif;
    line-height: 1.8;
    font-size: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-alt {
font-family: 'Montserrat', sans-serif;
text-align: center; 

}

... (CSS styling)... 

.footer-text {
    font-size: 0.8em;
}

Answer №1

Working with Bootstrap rows and columns involves a careful balance. Altering these components using custom CSS can lead to unexpected issues, as demonstrated in this scenario.

For example, adding code like the following:

.row {
    max-width: 1140px;
    margin: 0 auto;
}

Eliminates the necessary negative margin, resulting in the excess white space you're currently experiencing.

Instead of resorting to unnecessary custom CSS, it's best to utilize the built-in Bootstrap 4 classes to achieve your layout needs. These classes offer a wide range of customization options without the need to delve into CSS.

For a deeper understanding of how the Bootstrap grid functions, refer to this informative article:

Keep in mind that while this article focuses on Bootstrap 3, the core principles also apply to Bootstrap 4's grid system.

Answer №2

It is important not to modify the margin or max-width properties of the .row class. This class has been designed with negative margins for a specific purpose, as explained in more detail in this Stack Overflow thread.

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

What is the best way to trigger a jQuery function after adding a <div> element through Ajax loading?

When I use Ajax to append a <div>, the dynamic inclusion of jQuery functions and CSS for that particular <div> does not seem to work. The insertion is successful, but the associated jQuery functions and CSS do not load properly. How can this be ...

What is the best way to position two text fields next to each other on a webpage?

As I design a form for a landing page, my goal is to arrange the text input fields side by side in order to avoid making the form too lengthy. I am striving to achieve a layout similar to this: https://i.sstatic.net/PTCr4.png However, the task seems quit ...

Troubleshooting: Issues with CSS fixed positioning

Whenever I try to scroll down, my navbar moves along with the page. Even when I resize the window, it keeps shifting despite using position:fixed. What mistake am I making? nav li:nth-child(1) { position: fixed; border: 1px solid #15317E; font-si ...

The jQuery hide and show functions lack precision and are too indiscriminate, requiring a more targeted approach

I am designing a unique contact card that captures a user's name and description from an <input> field and appends the input information into a <div> element. This is the flow I am aiming for... User inputs their first and last name alo ...

Guide on converting a date input to a timestamp

I am trying to convert the date retrieved from an HTML5 date input into a timestamp and store it as a variable. HTML: <form> <section class="input"> <input type="date" id="date" name="maintenanace_date"/> </section> <sectio ...

Looking to implement a dual-column layout for posts on WordPress using Bootstrap

Creating an intranet website for a client which functions similar to a Facebook or Twitter feed. The layout includes three columns using Bootstrap's grid system. The first column serves as a navigation sidebar, while the other two columns should disp ...

What is the best way to ensure that a <div> extends all the way to the bottom?

My goal is to have this element reach the bottom of the screen, but I also have a header which complicates things. Setting height: 100%; or 100vh results in the page being too big and scrollable. I don't want to manually calculate it because of respon ...

Generate a fresh row in a table with user inputs and save the input values when the "save" button is

HTML: <tbody> <tr id="hiddenRow"> <td> <button id="saveBtn" class="btn btn-success btn-xs">save</button> </td> <td id="firstName"> <input id="first" type="tex ...

Element with negative z-index overlapping background of parent element

I am currently working on creating a CSS3 animated menu, but I am facing an issue where elements with low z-index values are displaying on top of their containing elements. This is causing the "sliding out" effect to be ruined. Here is the HTML: <html ...

I require varying numbers of columns on each row based on the breakpoint in Bootstrap4

After realizing it was easier than expected, I simply consolidated all columns into one row and the responsiveness now works perfectly. Thank you to everyone who helped. https://i.sstatic.net/4Sx41.png I am utilizing Bootstrap 4 grid system to structure 3 ...

Gatsby - Bootstrap Issue: util.js:68 TypeError: Unable to access property 'fn' of undefined

Currently, I am in the process of developing a website using React and the Gatsby framework. The issue I am facing is as follows: https://i.sstatic.net/dbpof.png util.js:68 Uncaught TypeError: Cannot read property 'fn' of undefined at util.j ...

Is there a way to adjust the selected color of a TextField?

I'm currently working with the Material-UI React library and I am trying to customize the border color of a TextField when it is clicked or in focus. This is my attempt so far: const useStyles = makeStyles((theme) => ({ input: { borderWidth: ...

Overflow of dropdown menus in HTML CSS

Hello, I am new to both html and stack overflow. Please forgive me if this question has already been asked, as I couldn't find anything (but maybe I didn't search enough?). I have tried using overflow and clear properties, but I am struggling to ...

XML powered jQuery menu

Admittedly, I have not yet used XML with jQuery. Below is a snippet of the XML: <folder title="Home"> <item title="Welcome" /> <folder title="My Photos"> <folder title="Holiday"> <item title="Photo 1" /> ...

How can I determine the specific quantity of XPATH links with unique identifiers in Selenium?

Seeking automation with Python3 and selenium to streamline searches on a public information site. The process involves entering a person's name, selecting the desired spelling (with or without accents), navigating through a list of lawsuits, and acces ...

Position two in-line divs at the bottom, one on each side

I am in search of a way to dynamically position two elements at the bottom of a container, making sure they are at opposite corners. Much like how the Stackoverflow Logo and the Ask Question are aligned at the bottom but on different ends of their containe ...

Encountering a predicament when attempting to retrieve an image from an alternative

[index.jsp][5] style.css [problem][6] [folder hierarchy][7] Although everything runs smoothly when the file is located in the css directory, it fails to show any images if placed in the images folder. Kindly provide assistance. ...

Ways to unmark the "select all" checkbox when any one of its children is no longer selected

Is there a way to automatically uncheck the "Select All" checkbox when any of its child checkboxes are deselected? In the code snippet provided, the goal is for the "Select All" checkbox to be unchecked if not all child checkboxes are selected. The script ...

I need to adjust the alignment of the text within my list item that includes a time element

I am struggling with aligning my elements vertically downward as the text following the "-" appears disorganized. I attempted to enclose the time tags within div elements and align them so that they evenly occupy space, but this approach did not work. Ins ...

Efficiently passing parameters to AJAX URLs in Django

When trying to pass a parameter to the URL path to specify which user's role I want to change, I keep encountering an error. NoReverseMatch at /manageuser/ Reverse for 'editrole' with keyword arguments '{'user_name': &apo ...