CSS - Negative Margins Leading to Horizontal Scrolling Issue in Mobile Viewport

I’m working on some HTML and CSS code that looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8defe2e2f9fef9ffecfdcdb8a3bca3be">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <div class="container p-1">
        <div class="row">
            <div class="col-6" style="background-color: yellowgreen;">
                Hello 1
            </div>
            <div class="col-6" style="background-color: yellow;">
                Hello 2
            </div>
        </div>
    </div>
</body>
</html>

I used to believe that the negative margin in the row would just affect the padding of the columns. But it seems like there’s more to it.

Why do I also need to add extra left/right padding of 12px to the container to prevent horizontal scrolling on mobile devices...

Why is it so restricted to adjust the container padding as desired?

https://i.sstatic.net/tzC6k.png

htmlcssbootstrap-4

Answer №1

The issue arises from the row element, which has negative margins. To eliminate these margins, you can apply the class m-0:

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e3333282f282e3d2c1c69726d726f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <div class="container p-1">
        <div class='row m-0'>
            <div class="col-6" style="background-color: yellowgreen;">
                Hello 1
            </div>
            <div class="col-6" style="background-color: yellow;">
                Hello 2
            </div>
        </div>
    </div>
</body>
</html>

To understand why these negative margins exist, refer to this thread: Why does the bootstrap .row class have a default margin-left of -30px?

TLDR: Negative margins are used in Bootstrap to remove spacing between <span> elements within a row containing them.

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

top margin is functioning properly in Internet Explorer, but not in Google Chrome

margin-top is behaving differently in IE compared to Google Chrome. Two menus are supposed to be displayed one above the other in my design. The issue lies in the line margin-top:30%; within .anothermenu ul. In Chrome, the second menu appears above the f ...

javascriptjqueryhtmlcss

unexpected behavior when using jquery click function

I am currently working on a unique custom radio element that showcases images instead of the standard radio buttons. The basic HTML structure looks like this: <div id="wrap"> <p></p> <input type="radio" data-check='class-c ...

javascriptjqueryhtml

Encountering a NullPointerException when transferring inputs from scala.html to Controller as a form in Play framework (version 2.8.*) using

I am currently developing a Java web application using the Play Framework (2.8.19). In the process of creating a registration page, I encountered an issue with passing inputs from the registration page written in Scala to the controller class that is respo ...

javahtmlpostgresqlplayframeworkplayframework-2.8

Creating a search field in Bootstrap 4 that emulates material design, facing challenges with transition animations

I tried to create a material design search field using Bootstrap form input. While I was able to make it work, I noticed a small issue with the focus state. When I click inside the field, the underline animation runs smoothly. However, when I click outside ...

htmlcsstwitter-bootstrapbootstrap-4

Getting the value of a JavaScript variable and storing it in a Python variable within a Python-CGI script

Is there a way to capture the value of a JavaScript variable and store it in a Python variable? I have a Python-CGI script that generates a selection box where the user can choose an option from a list. I want to then take this selected value and save it ...

javascriptpythonhtmlcgi

Retrieving the ID value and activating a click function for each link sharing a common class using jQuery

I'm facing a challenge in enabling the click function for every link with the same class name and unique id. Currently, the click function is only working on the first link, but there could be any number of links - 1, 2, 3, or more... To tackle this ...

javascriptjqueryhtml

Adjust the top spacing in relation to the paragraph tag using jQuery

I wish to create multiple div elements with nested p tags that are initially hidden. Upon hovering over each div, I want the corresponding p tag to move up by the negative value of its own height. For instance: The first p tag has a height of 60px and a m ...

jqueryhtmlcss

Modify the color of every element by applying a CSS class

I attempted to change the color of all elements in a certain class, but encountered an error: Unable to convert undefined or null to object This is the code I used: <div class="kolorek" onclick="changeColor('34495e');" style="background-c ...

javascripthtmlcss

Unable to get Bootstrap IMG-RESPONSIVE to function properly in Firefox and IE within the navbar

I recently encountered an issue with the Bootstrap IMG-RESPONSIVE class not functioning properly in the navigation bar on Firefox and IE. Oddly enough, it was working perfectly just a few days ago until I made some unknown changes, causing it to only work ...

csstwitter-bootstrapresponsive-design

Selenium's XPath locator unable to locate element despite being visible on the browser

Attempting to extract the WHO coronavirus data from the left sidebar of this website: using Xpath. Here is the code snippet: from selenium import webdriver import time driver = webdriver.Firefox() driver.get("link_to_the_page") time.sleep(30) coun ...

pythonhtmlseleniumxpathwebdriver

What is the best way to access all of the "a" elements contained within this specific div?

Chrome websites are built using the following structure: <div class="divClass"> <a class="aClass"></a> <a class="aClass"></a> <a class="aClass"></a> </div> Utili ...

javascripthtmljquerygoogle-chrome-devtools

Issues with Opera displaying specific characters when using webfonts

Perhaps it's not supposed to work this way, but hear me out. I'm utilizing Google Web Fonts and adding the PT Sans font like this: <link href="https://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" ty ...

htmlcssfont-facewebfonts

What is the most strategic way to conceal this overlay element?

Currently, the website I'm developing features a series of navigation elements at the top such as "Products" and "Company." Upon hovering over the Products link, an overlay displays a list of products with clickable links. Positioned at the top of the ...

javascriptjqueryhtml

Send properties to the makeStyles function and apply them in the CSS shorthand property of Material UI

When working with a button component, I pass props to customize its appearance: const StoreButton = ({ storeColor }) => { const borderBottom = `solid 3px ${storeColor}`; const classes = useStyles({ borderBottom }); return ( <Button varian ...

javascriptcssreactjsmaterial-uijss

The BootstrapDailog functionality appears to be malfunctioning when used in conjunction with Bootstrap4 and Jquery version 3.3

When utilizing BootstrapDialog with Bootstrap4 and Jquery3.3.1, I encountered an issue. When I call BootstrapDialog.confirm, it throws an error "Uncaught TypeError: Object.keys called on non-object" in older versions of Chrome. I tried adding Jquery-migr ...

bootstrap-4android-webviewjquery-3jquery-migratebootstrap-dialog

Exploring ways to transfer a function variable between files in React

Currently, I am working on a quiz application and have the final score stored in a function in app.js. My goal is to generate a bar graph visualization of the user's results (e.g. 6 right, 4 wrong) based on this score. To achieve this, I created anoth ...

javascripthtmlreactjschart.js

Troubleshooting issue with Bootstrap slider: CSS display problem

After downloading the Bootstrap slider from this link: https://github.com/seiyria/bootstrap-slider, I navigated to \bootstrap-slider-master\dist and transferred the bootstrap-slider.js and bootstrap-slider.min.js files to my js folder. Additional ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unidentified event listener

I am currently facing an issue where I keep getting the error message "addEventListerner of null" even though I have added a window.onload function. The page loads fine initially but then the error reoccurs, indicating that the eventListener is null. Str ...

javascripthtmlreactjsaddeventlistener

Show only the present y-coordinate in the ToolTip of a chart.js

I am currently working on developing a chart using Chart.js, and my goal is to only show the y-axis value in the tooltip. The current display shows: date name_of_line: measurement example: Jan 1, 2020, 8:00:00 AM 5th Percentile: 100 oz. However, I would ...

javascripthtmlchart.jstooltip

Implement a Selection Feature in Angular

Currently, I am working on an application where users can add new rows with the same fields. One of the requirements is to allow users to add an option to a select element. While I have successfully implemented this in jQuery, I am facing challenges integr ...

javascriptjqueryangularjscss