Issue with Bootstrap columns being misaligned on mobile devices

On my website, I've implemented a Bootstrap Grid design with three columns under the container-fluid BS attribute, along with .row .no-gutters.

While the boxes are perfectly aligned in the desktop view, they stack vertically on mobile and tablet devices with width:100%;, but unfortunately, they're not evenly aligned - as shown in the screenshot attached.

To address this issue, I modified the CSS within the @media attribute by applying the same styles but removing the padding.

Check out the mobile view screenshot here

Below is the specific code:

 /* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
  padding-right:5px;
  padding-left:5px;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
  padding-right:5px;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
  padding-left:5px;
}
.row{
margin-top: 20px!important;
margin-bottom: 20px!important;
display: block;
height: auto;
}

.legal_section{
padding: 20px!important;
background-color: #F5F5F5!important;
border: 1px solid #EBEBEB!important;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


</head>

<div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-lg-4">
                <div class="well legal_section">
                    <h4>Privacy Policy</h4>
                    <p>Our Privacy Policy explains how we use, collect and protect your data when you use our website.</p>
                    <br/>
                    <a href="../pages/privacy policy.html" class="std_button">Read More</a>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="well legal_section">
                    <h4>Cookie Policy</h4>
                    <p>Our Cookie Policy tells you about the use of cookies and how you can choose which cookies we collect and process.</p>
                    <br/>
                    <a href="../pages/cookie_policy.html" class="std_button">Read More</a>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="well legal_section">
                    <h4>Terms of Use</h4>
                    <p>Our Terms of Use specifies the legal use of our website, what your rights are, and how you can contact us. </p>
                    <br/>
                    <a href="../pages/website-terms-of-use.html" class="std_button">Read More</a>
                </div>
            </div>
        </div>
    </div>

htmlcssbootstrap-4

Answer №1

In order to remove the padding of col-**-* classes, you need to ensure that the left padding and right padding are equal. Additionally, the margin of the row class should also have the same value but in negative. For example, if the left and right padding of your col-**-* class is 5px each, then the left and right margin of the row should be -5px each.

See the snippet below for the solution.

.row.no-gutter [class*='col-'] {
  padding-right:5px;
  padding-left:5px;
}
.row.no-gutter{
  margin-right: -5px !important;
  margin-left: -5px !important;
}
.row{
  margin-top: 20px!important;
  margin-bottom: 20px!important;
  display: block;
  height: auto;
}
.legal_section{
  padding: 20px!important;
  background-color: #F5F5F5!important;
  border: 1px solid #EBEBEB!important;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="row no-gutter">
      <div class="col-lg-4">
        <div class="well legal_section">
          <h4>Privacy Policy</h4>
          <p>Our Privacy Policy explains how we use, collect and protect your data when you use our website.</p>
          <br/>
          <a href="../pages/privacy policy.html" class="std_button">Read More</a>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="well legal_section">
          <h4>Cookie Policy</h4>
          <p>Our Cookie Policy tells you about the use of cookies and how you can choose which cookies we collect and process.</p>
          <br/>
          <a href="../pages/cookie_policy.html" class="std_button">Read More</a>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="well legal_section">
          <h4>Terms of Use</h4>
          <p>Our Terms of Use specifies the legal use of our website, what your rights are, and how you can contact us. </p>
          <br/>
          <a href="../pages/website-terms-of-use.html" class="std_button">Read More</a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Answer №2

The reason for the issue lies within these particular styles.

            /* eliminating space between middle columns */
           .row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
             padding-right:5px;
             padding-left:5px;
           }
           /* removing right padding from first column */
           .row.no-gutter [class*='col-']:first-child {
             padding-right:5px;
           }

The very first child does not have left padding, while the other elements do. This needs to be consistent across all.

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

Notification from HTML code within Django

In my Django project, I am trying to implement an alert. I am sending data from views.py to singup.html in order to display an alert based on certain conditions. However, initially the alert variable in HTML is not assigned a value. It is only after click ...

javascriptdjangohtmlalert

What is the best way to dynamically adjust the size of a Google map on my website automatically

I need assistance with placing a Google map on a webpage along with textboxes in the div below it: <div id="map_area"> <div id="map_canvas"></div> </div> <div id="date_range"> <input type="text" id= ...

csshtmlheight

Creating a website layout with two evenly sized columns, one of which can be scrolled through

I am facing a challenge with my HTML table that has one row and two columns. I want the two columns to have equal height, but achieving this has proven difficult using floats or flexbox. Therefore, I turned to using a HTML-table. The content in the left c ...

htmlcsshtml-tablescrollable

When submitting a form in HTML, ensure that the input checkbox returns 'On' instead of 'True'

My MVC3 app is using Project Awesome from http://awesome.codeplex.com/, but I'm encountering a strange issue with checkboxes. Inside a Modal popup, I have the following simple Html code: <input type="checkbox" class="check-box" name="IsDeleted"> ...

javascriptjqueryhtml

Incorporation of a dynamic jQuery animation

I'm a beginner in jquery and I'm attempting to achieve the following: I want each menu to collapse separately when the mouse hovers over it. The issue is that both menus collapse simultaneously! I know it's probably something simple, but I ...

javascriptjqueryhtmlcss

Ensure that three spans are precisely aligned to occupy a single line

My dilemma is as follows: I have a line within a document that has a set width. Now, there are 3 elements involved - one <a> tag and two <span> tags. The content in the <a> tag varies in width each time it appears on the line. The thi ...

htmlcssresponsive-design

Struggling with making a rest API request to render HTML

I am trying to retrieve the holders value from a REST API and display it on my website using HTML code. I've attempted the following code, but I'm having trouble actually printing the value. <!DOCTYPE html> <html> <body> <p& ...

htmlweb

Persistent vertical menu dropdown that remains expanded on sub menu pages

I am struggling to understand how to keep my menu sub items open when on the active page. Although I have tried similar solutions, I have not been successful in implementing them. I apologize if this question has been asked before. My approach involves usi ...

javascriptjqueryhtmlcss

Radio button selection with table layout

I am designing a quiz template with radio buttons. However, I would like them to be stacked vertically instead of side by side. Why doesn't the <br/> tag work? I'm having trouble understanding it. Can someone assist me? Here is my code: ...

htmlcss

The z-index issue with Bootstrap modal is not being resolved on Firefox and Internet Explorer

I am encountering an issue with my bootstrap modal that includes a jquery datepicker. Specifically, the datepicker is styled as follows: .datepicker{ z-index:1000;} Interestingly, it functions perfectly on Google Chrome, displaying like this: However, ...

jqueryhtmlcsstwitter-bootstrapz-index

Sets a minimum width for a Bootstrap panel

I have a panel panel-default on my page to display some data. I want the panel's min-width to be 720px, and if the window is resized to less than 720px, I want a horizontal scrollbar to appear. However, the panel cannot shrink below 720px similar to u ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Creating visual content on Canvas using JavaScript

Having an issue with stacking multiple images on separate Canvas layers, and they're not drawing on the canvas. Can anyone help me figure out what I'm missing? Thanks CSS .positionCanvas{ position: absolute; left:0; righ ...

javascriptcsshtmlcanvas

Having troubles with Navbar svg images not loading on certain pages on the express/ejs app?

Hello there, I'm encountering an issue with my navbar in an express app. The navbar is saved as a partial and included in a boilerplate wrapper used on most pages. Here's a snippet of how it looks: <h1>HELLO<h1> Within the boilerplat ...

cssexpressejs

What is the best way to manipulate the canvas "camera" in HTML?

I am currently developing a 3D game that involves navigating through skyboxes. My goal is to have the camera respond to user input, specifically detecting key presses (using WASD controls) to move the camera accordingly. Do you have any suggestions on how ...

javascripthtmlcsshtml5-canvas

Unusual anomalies observed in CSS navigation bar styling

During my CSS work on a navigation bar, I came across an unusual behavior. First Attempt: #nav li { display: inline-block; } #nav li { font-size: 1em; line-height: 40px; width: 120px; height: 40px; ...

csshtml

Displaying an error or success message upon submitting a form is currently not functioning as

I have implemented a registration/login system on my website, and currently, it shows errors and success messages at the top of the page. I want to display these messages under the form instead. However, every time I attempt to place them below the form, i ...

phphtmlforms

Each element is being adorned with the Ajax success function class

Currently, I am in the process of creating an Ajax function to integrate search features into my project. The search function itself is functioning properly; however, within the success: function, I am encountering an issue. Specifically, I am attempting t ...

javascripthtmljquerycss

Is there a way to vertically align the content of two <li> elements when one contains an image within an anchor tag?

I'm attempting to display an HTML unordered list horizontally with each item having the same length and height, while also containing a link. One of the items should also contain an image. My goal is to align these items vertically. To achieve this, ...

css

Refresh tab URLs for dynamic tabs with jQuery UI

Utilizing jQuery UI dynamic tabs in my application requires updating the URL hash value when a user clicks on a tab. After researching solutions on SO, like link1 and link2, I attempted the following approach: Javascript: $( "#tabs" ).tabs({ select ...

jqueryhtmljquery-ui

CSS-exclusive dropdown menu elements peeking out

I have been working on a CSS-only drop-down menu and I am encountering an issue where other content seems to be showing through. Despite my efforts, I can't figure out why this is happening. If you would like to take a look, here is the link: http:// ...

css