The mobile display is crowded with stacked cards

Everything was going smoothly with the three cards I created, but when viewed on mobile devices they end up stacking on top of each other. This is not the result I had anticipated after importing all the necessary jQuery and CSS files.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd9d4d4cfc8cfc9dacbfb8f958d9589">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1dbc0c4d4c3c8f1829f849f80">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76141919020502041706364258405844">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous">></script>
<section class="bg-light p-4">
    <div class="container col-md-12 ">
        <h1 class="text-center">services</h1>
        <div class="row text-center ">
            <div class="col-md-4 col-4 p-2 position-static "> 
                <div class="card pt-2 bg-info text-white " style="width: 17em;">
                    <i class="display-1  fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
                    <div class="card-body">
                      <h5 class="card-title">Web App Development</h5>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                    </div>
                </div>
            </div>
            <div class="col-md-4 col-4 p-2 position-static "> 
              <div class="card pt-2 bg-info text-white " style="width: 17em;">
                  <i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
                  <div class="card-body">
                    <h5 class="card-title">Web App Development</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                  </div>
              </div>
            </div>
            <div class="col-md-4 col-4 p-2 position-static"> 
              <div class="card pt-2 bg-info text-white" style="width: 17em;">
                  <!-- <i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i> -->
                  </div>
              </div>

          </div>
        </div>
    </div>
</section>

At its default view, everything functions as expected. View it here.

javascripthtmljquerycssbootstrap-4

Answer №1

It is recommended to avoid using inline width styles in cards.

style="width: 17em;"

Demo 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aecc7d7b7c8ddcacdc6eacdbfdcadafaabbbca88aabbfebdb69">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f09a8185958289b0c3dec5dec1">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d5b4859691d071f071b">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<section class="bg-light p-4">
    <div class="container col-md-12 ">
        <h1 class="text-center">services</h1>
        <div class="row text-center ">
            <div class="col-md-4 col-4 p-2 position-static "> 
                <div class="card pt-2 bg-info text-white ">
                    <!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
                    <i class="display-1  fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
                    <div class="card-body">
                      <h5 class="card-title">Web App Development</h5>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                      <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-4 p-2 position-static "> 
              <div class="card pt-2 bg-info text-white ">
                  <!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
                  <i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
                  <div class="card-body">
                    <h5 class="card-title">Web App Development</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
                  </div>
              </div>
            </div>
            <div class="col-md-4 col-4 p-2 position-static"> 
              <div class="card pt-2 bg-info text-white">
                  <!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
                  <!-- <i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i> -->
                  <i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
                  <div class="card-body">
                    <h5 class="card-title">Web App Development</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
                  </div>
              </div>

          </div>
        </div>
    </div>
</section>

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

Is it possible to create a DOM element with a click handler all in one step?

I am looking to dynamically create an element, like this: var productItemTop = $( "<span>" + "<a class='spamItemsX' href='#' " + "onclick=" + eval(launchGenericProductSearch(topProducts)) ...

javascriptjquery

Having trouble retrieving data in AngularJS with an HTTP GET request in the Eclipse IDE

I am currently working on implementing an HTTP GET request in AngularJS using Eclipse IDE and running my application on Tomcat 9.0 server. Here is the directory structure of my project: https://i.sstatic.net/4tS5c.png index.html: <!DOCTYPE html> ...

angularjsbootstrap-4

The componentDidUpdate function fails to trigger in React Native after modifying the reference of its prop

In this section of my parent component, I am invoking my child component AttachmentField. configurableField.attachments.map((item, i) => { if (item.type.includes("pdf")) { const url ...

javascriptreact-nativeexporeact-lifecyclereact-lifecycle-hooks

Tips for making a bootstrap card that matches the container's height and includes a scrollable body

I am currently working on a Bootstrap card that needs to match the height of its container. Specifically, I want the card header to be at the top, the footer at the bottom, and the body to fill the remaining space. The body should also be scrollable to acc ...

htmlcssbootstrap-4

Strategies for Efficiently Caching AJAX Responses to Minimize Further HTTP Requests

Recently, I implemented a tabbed-layout on my website where each tab leads to a different page. However, I am looking for a way to prevent a new HTTP post call every time the user switches between tabs. Ideally, I would like to find a JS-based solution t ...

jqueryajax

Issues with data binding in Angular2 are arising specifically in IE11

After successfully loading the application on Chrome, Firefox, and Edge, I encountered difficulties when trying to load it on IE11. The data bindings were not created properly, despite the internal data being fetched correctly through a websocket connectio ...

javascriptangularcross-browserinternet-explorer-11

Leveraging three.js for visualizing temporal data series

What is the best approach for using time series data to control the animation of a three.js scene? For instance: Time | ObjA(x,y,z) | ObjB(x,y,z) | ... 00:00:00 | 0,9,0 | 1,1,1 | ... 00:00:10 | 0.1,0,0.1 | 1,0.5,1 | ... 00:0 ...

javascriptopengl-esthree.jswebgl

Efficient methods to reach the desired result using Selenium WebDriver promises

After working on a piece of code that utilizes Selenium WebDriver to retrieve the text of an element, I am wondering if there is a more concise way to accomplish this task? async function getText(driver, locator) { return await (await driver.findEleme ...

javascriptnode.jsselenium-webdriverpromiseasync-await

Incorporating multiple CSS style sheets within a single HTML document

As part of my assignment, I have successfully created two different CSS style sheets. The next step is to link both style sheets to a single HTML page and provide users with the option to switch between the two styles. I am wondering how to achieve this. ...

javascripthtmlcssdreamweaver

Invoke a function from a popup window, then proceed to close the popup window and refresh the parent page

When a link in the parent window is clicked, it opens a child window. Now, when the save button is clicked in the child window, I need to trigger a Struts action, close the child window, and reload the parent window. function closeChildWindow(){ document. ...

javascriptjavajspstruts-1

Exploring the utilization of server-side Web Sockets functionality

Recently, I've been diving into the world of Web Sockets and I'm eager to understand how server-side implementation works. While I feel comfortable with writing client-side code using onmessage() in HTML5, JavaScript, etc., I find myself unsure a ...

htmlwebsocketnpm

Joining arguments beyond argv[2] in a Node.js application

Recently, I received a suggestion from Mykola Borysyuk to use node-optimist. However, the author mentioned that it's deprecated and recommended using Minimist. Even after going through the information, I have a basic understanding. Can someone provid ...

javascriptarraysnode.jsnpm

Sibling div positioned below the main div

I have a container div with two child divs inside. The first child div has a fixed width, but its height depends on the content (a message box). Right next to it on the same line, I want another div (displaying the time) to be at the bottom of the parent d ...

csscss-floathtml

Edit data with modal form in Angular-UI

Currently in the process of developing a single page todo application using AngularJs and Angular-Ui. Encountering difficulties when attempting to edit a todo item at this stage. The plan is to utilize a modal window for editing information, successfully ...

javascriptangularjsformsmodal-dialogangular-ui

AJAX call error: Invocation not permitted

I'm currently working on a web application using JQuery that requires communication with a server. I've reused this code multiple times, only changing the data and success function. However, every time I execute this function, I encounter an err ...

javascriptjqueryajax

Unable to convert cursor to jpg format

I am facing an issue where I have a jpg file stored in the same folder as my styles.css, and I want to change the cursor on a webpage to this particular jpg file. Despite my efforts, it seems like the cursor is not changing as expected. Currently, I am us ...

htmlcss

Is the tabindex feature malfunctioning for the submit button in an HTML form?

Hey there, I created the design like this. However, the submit Tabindex is not working as expected. Can you please take a look at it and let me know what might be causing this issue? <input id="id" type="text" value="" class="input" tabindex="1"/> ...

htmlasp.net-mvc-3

What is the method to integrate PHP with HTML code?

Apologies if this question has been asked before, but I have not found anyone with the same query as mine. I am new to HTML and PHP, and I am looking to enhance my skills by creating a registration form and storing all the data in a MySQL database using XA ...

phphtmlajax

Django failing to detect empty URL configuration

Hey there! I'm new to this, and I was trying out a tutorial on py/django. The web server is up and running, but it's only showing the default page: https://i.sstatic.net/xnCrW.png Even though my urls.py has the default page set. urls.py from dj ...

pythonhtmldjangovisual-studio-code

Enter a keyword in the search bar to find what you're looking

I am working on a form where users can select their occupation from a list that is stored in a separate .js file. The list includes various occupations like 'AA Patrolman' and 'Abattoir Inspector'. var occupationSelect = "<select id ...

javascripthtmlinput