Issue with Bootstrap nested column not functioning properly on mobile devices

Currently, I am facing an issue with my bootstrap column grid on my website. It works fine for laptop and tablet screens, but there seems to be a problem when viewing it on mobile devices.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row">
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                                        <div class="row">
                                            <div class="col-md-1 col-sm-1 col-xs-1 mt-2">
                                                <span class="border border-primary rounded" style="background-color:#0275d8;display:inline-block;padding:10px;"> </span>
                                            </div>
                                            <div class="col-md-11 col-sm-11 col-xs-11">
                                                <h2>Who we are</h2>
                                                <hr>
                                                <p>Scaoasijdaosijdoaisdjh.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                                        <div class="row">
                                            <div class="col-md-1 col-sm-1 col-xs-1 mt-2">
                                                <span class="border border-success rounded" style="background-color:#5cb85c;display:inline-block;padding:10px;"> </span>
                                            </div>
                                            <div class="col-md-11 col-sm-11 col-xs-11">
                                                <h2>What we do</h2>
                                                <hr>
                                                <p>textxtxttx</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Upon closer inspection, one of the columns is designed in such a way that it appears as an empty colored bullet or numbering on the left side, while the other columns contain text elements (h2, hr, p) on the right. However, when viewed on a mobile screen, the bullet seems to overlap with the other columns. What could be causing this issue that I'm unable to resolve?

htmlcsstwitter-bootstrapbootstrap-4multiple-columns

Answer №1

Here is the solution you requested:

codepen: https://codepen.io/Rishab2019/pen/JjYrLEB

.col-md-11, .col-sm-11, .col-xs-11{
  position:fixed!important;
  margin-left:80px;
  
}

.new1{
  margin-left:-30px;
  margin-top:-9px;
}


.row1{
  
 
   
  position:fixed; 
  display:inline;
  margin-left:500px;
  width:700px;
  
  
  
  
  
}

.row{
  
 
  
  position:fixed; 
  display:inline;
  
  width:800px;
  
  
  
}

.para{
  float:left;
  position:fixed;
  margin-top:40px;

}
.para1{
  float:left;
  position:fixed;
  margin-top:40px;
}


hr{
  width:700px;
  float:left;
 }

.border1{
  position:absolute;
  margin-left:-100px;

}

@media all and (max-width:768px){

.row{
position:fixed;

}
  
  .row1{
position:fixed;
width:100%;
margin-left:450px;
}
  .head{
  font-size:25px;
  
}
  hr{
  width:250px;
  margin-left:0px;
  
  
}

}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row">
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                  <div class="row">
      <div class="col-md-1 col-sm-1 col-xs-1 mt-2">
       <span class="border border-primary rounded" style="background-color:#0275d8;display:inline-block;padding:10px;"> </span>
                                            </div>
                                            <div class="new col-md-11 col-sm-11 col-xs-11">
                                                <h2 class="head">About Us</h2>
                                                <hr>
                                              <p class="para">Lorem ipsum dolor sit amet.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                                        <div class="row1">
                                            <div class="col-md-1 col-sm-1 col-xs-1 mt-2">
                                                <span class="border1 border-success rounded" style="background-color:#5cb85c;display:inline-block;padding:10px;"> </span>
                                            </div>
                                            <div class="new1 col-md-11 col-sm-11 col-xs-11">
                                                <h2 class="head">Services</h2>
                                                <hr>
                                                <p class="para1">Some text here.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

You can also utilize media queries for further styling adjustments.

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

Toggle the visibility of table TDs by clicking on a specific TD cell

I came across a solution that perfectly addressed my issue, but I'm struggling to implement it in my code correctly. I managed to get it to work initially, but then everything suddenly stopped functioning... Show or hide table row if user clicks on i ...

jqueryhtmlhideshow

Query CSS to target an empty array within the .data() method

I have a scenario where I am storing an array in a button using Jquery's .data() method. If the array happens to be empty, I want the button to appear in red color. How can I target the button with an empty array using CSS? var values1 = []; var ...

javascriptjqueryhtmlcss

Utilize Angular components in TypeScript to effectively manage errors within forms

I am currently developing a form in Angular/Typescript with more than 10 fields, and I want to streamline error management without redundancy in my HTML code. Here is an example of the form structure : <form [formGroup]="myForm"> <label&g ...

javascripthtmlangulartypescriptangular5

Can I apply a different color to every row in an HTML selector?

My question involves using an HTML selector that allows the user to choose a color. <select name="color" class="form-control"> <option value="ff0000">Red</option> <option value="ff7f00">Orange</option> <option value= ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Ways to prevent all click events on a webpage using JQuery

Is there a way to prevent all click events from occurring in an HTML document? I am working on a Webapp where users may need to acknowledge a message before proceeding. The goal is to have the message appear and grab the user's attention if they clic ...

javascriptjqueryhtmlinternet-explorerclick

Expandable full-width JavaScript accordion for seamless navigation

Currently, I am working on a simple on-page JavaScript application that consists of multiple data pages within one main page. My goal is to create a horizontal accordion effect where clicking on headers on either side will smoothly switch between the diffe ...

javascriptjqueryhtmlcss

Changing DOM classes in Angular using jQuery

I am currently in the process of upgrading an AngularJS application to Angular 2 or higher. How can I modify the following code snippet in Angular 2+ to dynamically add or remove CSS classes from the DOM: link(scope, element, attrs) { let app = angula ...

javascriptjqueryangularjshtmlangular

Displaying text alongside variables within a foreach loop

I've created a custom script to manage a webpage that includes three checkboxes. Here is the HTML for the checkboxes: <input type="checkbox" value="Ex1" name="Check[]" />Ex1 <input type="checkbox" value="Ex2" name="Check[]" />Ex2 <inp ...

phpsqlmysqlhtml

Is there a way to enable a clickable imagemap area using jQuery?

Example showcasing different behaviors in various browsers (jsfiddle link): <!DOCTYPE html> <html> <head> <title>Browser Behavior Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/ ...

jqueryhtmlcssimagemap

What is the reason behind the modification in flex item size when align-items property is applied?

When creating the responsive design, I utilized flexbox. Surprisingly, without changing the size of each flex-item, applying align-items:center caused the size of the first flex item (PICTURE 2) to change when displayed in a vertical view. On the other han ...

cssflexboxresponsive-design

Tips for applying unique scss classes to a div based on a specific condition

Currently, I am developing a chat application where I want to showcase messages from one specific user on the right side of the screen while displaying messages from other users on the left side. <ion-item *ngFor="let message of messages | slice:0: ...

cssangularionic-frameworksassflexbox

Generate unique identifiers in HTML

Below is my HTML and JavaScript code: <!DOCTYPE html> <html> <head> <style> .custom-div { border: 1px solid green; padding: 10px; margin: 20px; } </style> <script> ...

javascripthtml

Accessing the CSS directly for one of the Kentico sites necessitates logging in

After launching the 3rd site on my Kentico install with multiple sites, I am encountering a strange issue. Files such as images, scripts, or CSS files are not loading by their relative path on this particular site. Instead, when I try to access the URL dir ...

htmlcsskenticomembership

Update the image within the svg tag

I am attempting to modify a preexisting SVG element within an HTML document. Here is the current code: <svg class="logo" viewBox="0 0 435 67"> <!-- IMAGE DIMENSIONS --> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo- ...

javascriptjqueryhtmlsvg

Troubleshooting: Unsuccessful Data Binding in HTML5 Input Date using Angular

Having trouble binding a date to an input field: <body ng-app> <div ng-controller="MainCtrl"> <input type="date" ng-model="dateString"/> <br/>{{ dateString }} <br/><input type="date" ng-model="date1"/ ...

angularjshtml

Discovering the element's class within an each loop

I am currently working on a dynamic menu system that changes the style of the active page item in the menu. My approach involves utilizing separate body classes for each page and then iterating through the li elements in the menu to find a match with the b ...

javascriptjqueryhtmlcss

The personalized confirmation dialog is experiencing malfunctions

I have designed my own custom dialogs using Bootstrap and jQuery, such as Alert and ConfirmDialog. Here is a sample: http://jsfiddle.net/eb71eaya/ The issue I am facing is that in the callback function, I make an AJAX call. If it returns true, I want to ...

javascriptjqueryajaxtwitter-bootstrapbootstrap-modal

Is there a way to limit the width of an inline anchor element?

I tried implementing the HTML tooltip solution from here and here is a snippet of my code: <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> sup.footnote::after { content: attr(data- ...

htmlcss

Dimension of the element that has been positioned absolutely

One of my challenges involves working with an absolutely positioned div element (.tooltip) containing another div (.text) that has text with a set max-width. The issue arises when the left property of .tooltip is too large, causing its width to shrink du ...

javascripthtmlcss

jQuery UI DatePicker: without any styling, no picking dates

I'm struggling to configure a jQuery UI DatePicker. I moved the development-bundle folder contents to the directory res/jqueryui and initialized two datepickers as shown below: <script src="res/jquery-2.1.0.min.js"></script> <script sr ...

jquerycssjquery-uidatepickerjquery-ui-datepicker