In HTML, a Bootstrap row appears on top of another row when viewing on mobile devices

I have implemented a Bootstrap HTML section that consists of a container and two main rows. Here is the code snippet:

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

<style>
  .addonscard {
    width: 100%;
    height: 181px;
    padding: 2%;
    border: 1px solid #efefef;
  }
  
  .addonsimage {
    width: 100%;
  }
  
  .add-on-add-unit {
    color: #30ac15;
    border: 1px solid #30ac15;
  }
  
  .add-on-add-unit {
    font-size: 14px;
    line-height: 20px;
    padding: 2px 12px 2px 10px;
    border-radius: 10px;
    display: inline-block;
  }
  
  .add-on-add-unit {
    color: #30ac15;
    border: 1px solid #30ac15;
  }
  
  .addonsdesc {
    font-size: 13px
  }
  
  #showmore {
    text-align: center;
  }
  
  .clearme {
    clear: both;
    margin-top: 2%;
  }
</style>

<section class="addons">
  <div class="container">
    <div class="row">
      <div class="col-md-5">
        <div class="addonscard">
          <div class="row">
            <div class="col-md-4">
              <img class="addonsimage" src="test1.jpg" />
            </div>
            <div class="col-md-8">
              <h4>This is Heading</h4>
              <p>Price</p>
              <a href="#" class="add-on-add-unit">+ Add</a>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-5">
        <div class="addonscard">
          <div class="row">
            <div class="col-md-4">
              <img class="addonsimage" src="test2.jpg" />
            </div>
            <div class="col-md-8">
              <h4>This is Heading</h4>
              <p>Price</p>
              <a href="#" class="add-on-add-unit">+ Add</a>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12">
              <p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="clearme"></div>
    <div class="row">
      <div class="col-md-10" id="showmore">
        <a href="#" class="showmore">+ Show more add-ons</a>
      </div>
    </div>
  </div>
</section>

The issue I am facing is that the row containing the "Show more add-ons" link is displaying above the first row in the mobile view. I have attempted to adjust it using media queries without success. Can someone please advise on what might be causing this? Thank you in advance.

htmlcssbootstrap-4row

Answer №1

Eliminate the specified height (181px) from the CSS rules for the ".addonscard" class and modify it as follows:

.addonscard {
  width: 100%;
  height: auto; // The height has been changed to auto instead of 181px.
  padding: 2%;
  border: 1px solid #efefef;}

Answer №2

Adjust the height of rows and align them to the right!

@media only screen and (max-width: 576px) {
  .row{
  height:fit-content;
  float:right;
  }
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style>
  .addonscard {
    width: 100%;
    height: 181px;
    padding: 2%;
    border: 1px solid #efefef;
  }
  
  .addonsimage {
    width: 100%;
  }
  
  .add-on-add-unit {
    color: #30ac15;
    border: 1px solid #30ac15;
  }
  
  .add-on-add-unit {
    font-size: 14px;
    line-height: 20px;
    padding: 2px 12px 2px 10px;
    border-radius: 10px;
    display: inline-block;
  }
  
  .add-on-add-unit {
    color: #30ac15;
    border: 1px solid #30ac15;
  }
  
  .addonsdesc {
    font-size: 13px
  }
  
  #showmore {
    text-align: center;
  }
  
  .clearme {
    clear: both;
    margin-top: 2%;
  }
</style>


<section class="addons">

  <div class="container">

    <div class="row">

      <div class="col-md-5">
        <div class="addonscard">
          <div class="row">
            <div class="col-md-4">
              <img class="addonsimage" src="test1.jpg" />
            </div>
            <div class="col-md-8">
              <h4>This is Heading</h4>
              <p>Price</p>
              <a href="" class="add-on-add-unit">+ Add</a>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
            </div>
          </div>
        </div>
      </div>



      <div class="col-md-5">
        <div class="addonscard">
          <div class="row">
            <div class="col-md-4">
              <img class="addonsimage" src="test2.jpg" />
            </div>
            <div class="col-md-8">
              <h4>This is Heading</h4>
              <p>Price</p>
              <a href="" class="add-on-add-unit">+ Add</a>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12">
              <p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="clearme"></div>
    <div class="row">
      <div class="col-md-10" id="showmore">
        <a href="#" class="showmore">+ Show more add-ons</a>
      </div>
    </div>


  </div>

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 there a way to change my cursor to a pointer finger when hovering over my box?

<script type="text/javascript"> function draw() { var canvas = document.getElementById('Background'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.lineWidth = 0.4 ctx.strokeRect(15, 135, 240, 40) Is there a w ...

javascripthtmlcss

What is the best way to save a PDF from within a frame using JavaScript and an HTML5 <embed> tag?

I'm looking for assistance with a script for my website that dynamically generates a PDF after the user makes selections in one of the frames. The website uses the HTML5 tag to display the PDF file. Can anyone provide guidance on a script that can: ...

javascriptioshtmlpdf

Improving User Experience with HTML Form Currency Field: Automatically Formatting Currency to 2 Decimal Places and Setting Maximum Length

Hello there, I am currently facing an issue with the currency auto-formatting in a deposit field on my form. The formatting adds 2 decimal places (for example, when a user types 2500, the field displays 25.00). However, the script I wrote does not seem to ...

javascriptjqueryhtml

How can I customize the color of the title and property value in Handlebars?

Here is the list I am working with: <li>Equipment Area:{{equipment_area}}</li> <li>Equipment Type: {{equipment_type}}</li> <li>Manufacturer: {{manufacturer}}</li> <li>Model Number: {{model_number}}</li> < ...

htmlcssnode.jshandlebars.js

Tips on hiding specific table rows in two separate tables based on the chosen option from a dropdown menu

How do I hide table rows based on dropdown selection? The first table has a dropdown with two options: Current State and Future State. If I select Current State, I want to show or hide specific rows in the 2nd and 3rd tables. I am using IDs for these row ...

javascriptjqueryhtml

Different sources for multiple iframes

Greetings everyone, I am facing an issue with multiple iframes on my page, each with a different src attribute. Despite specifying unique sources for each iframe, upon loading the page, they all seem to be loaded with the same src. <html><body&g ...

jqueryhtmliframe

Stopping an HTML5 range input at a specific number: Tips and tricks

Does anyone have suggestions on how to use angularjs to stop a range slider at 75? I attempted it but it doesn't seem like the best approach. Any guidance would be appreciated. [EDIT for clarification after max=75 answer] Just to clarify, I want to di ...

javascriptangularjshtmlhtml-input

Could it be that the reason why document.getElementById is undefined in a Vue2 component is due to a misunderstanding

I am currently building a simple chat feature that fetches messages from Firebase and displays them in a div. The objective is to automatically scroll to the bottom of the div WHEN relevantMessages changes, as long as the current scroll position is close ...

htmlvue.jsvuejs2

What is the secret behind Facebook's ability to keep the chat bar fixed at the bottom of the browser window?

I am curious to learn about the method Facebook uses to keep the chat bar at the bottom of the browser window even when we scroll through the page. ...

htmlcssfacebook

What is the best way to align the navbar items in the center?

Is there a way to center the navigation bar elements using Bootstrap? HTML <body> <nav class="navbar navbar-inverse navbar-fixed-top " role="navigation"> <div> <ul class="nav navbar-nav"> ...

htmlcsstwitter-bootstrap

The items in the Bootstrap dropdown are not displaying

I am currently working on a project using Angular 12, and I encountered an issue with my Bootstrap dropdown menu not displaying any items. Below is the HTML code snippet causing the problem: <nav class="navbar navbar-expand navbar-dark"> ...

htmlangularbootstrap-4angular-ui-bootstrap

Enhancing WordPress Menu Items with the 'data-hover' Attribute

Looking for a solution to add "data-hover" to menu items on Wordpress, like: Wanting to insert: data-hover="ABOUT US" into <a href="#">ABOUT US</a> without manually editing the link's HTML to make it: <a href="#" data-hover="ABOU ...

javascriptjqueryhtmlcsswordpress

Visualizing live data streaming from MySQL

I am currently using this code to retrieve values from a database and create a basic line graph (showing response time to an alert vs. UTC time). Everything works smoothly when the data is static, but now I want to try retrieving the data in "real-time" (j ...

jqueryhtmlmysqlplotflot

Adding design to distinct element after clicking a button

Struggling with a JS/Jquery issue on my portfolio website, I admit that I am still just an average programmer. My portfolio website has five buttons, each representing a different project. For each project, there is a corresponding text description and an ...

javascriptjqueryhtmlcss

Creating a curved upper margin in the footer with Bootstrap: techniques and tips

I'm currently trying to create a footer with rounded corners at the top left and right. I've been using inline styles to test it out, but I can't seem to get it looking right. I'm working with Bootstrap 5 and applying custom inline styl ...

htmlbootstrap-5footer

The adhesive navigation bar isn't adhering

I'm having issues with making my navbar inside a header sticky over the whole page. Despite trying various solutions like removing overflow, adjusting the flexbox, and setting a specific height on the parent element, I still can't get it to work. ...

htmlcssnavbarsticky

Resizing webpages for mobile devices results in misaligned rows

I'm currently using Bootstrap on a website and encountering issues with the responsiveness of rows on mobile devices. The desired outcome is for rows to be divided into 4 equal sections per row on larger screens, then scale down to 2 equal sections p ...

htmlcsstwitter-bootstrapmobile

JavaScript Fullcalendar script - converting the names of months and days

I recently integrated the Fullcalendar script into my website (https://fullcalendar.io/). Most of the features are functioning correctly, however, I am seeking to translate the English names of months and days of the week. Within the downloaded package, ...

javascripthtml

Is it possible to retrieve JSON data and display only the entries with positive values in an HTML

I am working on a project that involves fetching JSON API data and displaying it in an HTML table, but only for values above 10. Below is the code snippet along with my JavaScript. I specifically want to exclude negative values and only display positive v ...

javascripthtmljsonfetch-api

Ways to arrange and space out td values

Here is an example of my HTML table: <table> <tr> <td>123 - 20 - 20</td> </tr> </table> The numerical values in the table are retrieved from a database and displayed like in this image: How can I ensure that ...

htmlcssdatabasealignment