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

Enhance your SVG with a stylish border by adding a decorative

Is there a way to add a blue or black border that follows the curve of an SVG used as a divider? <svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" prese ...

htmlcsssvg

Stopping CSS animations at a specific point along the path without using timing functions can be achieved by implementing a targeted

Is there a way to pause an animation at the 50% mark for 2 seconds and then resume? P.S. The setInterval method is not recommended! function pauseAnimation() { document.getElementById("0").style.animationPlayState = "paused"; }; var pauseInterval = set ...

javascripthtmlcsscss-animationskeyframe

Guide to dynamically implementing pagination through AJAX calls

In this javascript code snippet, I have a class named PurchaseHistory. var baseUrl = null; var parameters = null; var currentPageNumber = null; var TotalPages = null; var PageSize = null; $(document).ready(function () { baseUrl = "http://localhost/AP ...

javascriptjqueryhtml

Customize the delete icon margin styles in Material-UI Chip component

Currently, I have implemented the V4 MUI Chip component with a small size and outlined variant, complete with a specified deleteIcon. However, I am encountering difficulties when attempting to override the margin-right property of the deleteIcon due to MUI ...

cssreactjsmaterial-ui

What is the best way to add a border around an image along with a button using VueJS?

I am struggling to link a button and an image in VueJS to display a border around the picture. While I can successfully display the border on the button, I am unsure how to extend it to the image as well. Vue.component('my-button', 'my-img& ...

javascripthtmlcssvue.jsvuejs2

Is it acceptable to replicate another individual's WordPress theme and website design in order to create my own WordPress website that looks identical to theirs?

It may sound shady, but a friend of mine boasts about the security of his WordPress website, claiming it's impossible to copy someone else's layout or theme. However, my limited experience in web development tells me otherwise. I believe it is po ...

htmlcssjsonwordpresswordpress-theming

Utilizing a Web Interface for Remote Monitoring of Windows Servers

I am in need of creating a webpage that will indicate whether a server is currently operational or not. These servers are all Windows based, with some running on 2008 and others on 2003. They are spread across different networks within various client locat ...

javascriptphphtmlsnmp

The error message "ERR_CONNECTION_TIMED_OUT when trying to access Google APIs fonts

Upon deploying my web project on the client server, I encountered an error and noticed slow page loading. GET https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic net::ERR_CONNECTION_TIMED_OUT The browser ...

javascriptjquerycss

The styling in CSS does not accurately reflect its relationship to the parent

My code includes a div with the ID of "outer" nested inside a parent div with the ID of "Container". I'm attempting to adjust the properties of the outer div relative to its parent, meaning its width, height, and other attributes should be based on th ...

htmlcssparent-child

Seeking a JavaScript tool specialized in compressing POST data?

Currently working on a chrome extension that sends HTML strings to a server using POST requests. Interested in compressing these large strings before sending them. Wondering if there are any JavaScript libraries that can help with this? ...

javascripthtmlcompression

Using ngForm to implement multiselect options in HTML

Attempting to implement a multiselect dropdown that is tied to a dynamic property receiving data from a JSON script via service. Successfully displayed the data in the dropdown, but encountering abnormalities when adding the multiple attribute within the s ...

htmlangulartypescript

Looking for a particular table element using Selenium Webdriver in Java: A Guide

After locating a table element using this: WebElement tableElement = selectorboxelement.findElement(By.xpath("//ancestor::table")); I identified the `selectorboxelement` as a web element with this line of code: WebElement selectorboxelement = driver.fin ...

javaselenium-webdrivercellhtmlancestor

Animate the toggling of classes in jQuery

Here is a code snippet that I came across: $('li input:checked').click(function() { $(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000); }); This code is functioning correctly when the element is clicked for the first time. I ...

javascriptjqueryhtmlcss

CSS Transform animation does not work when a class is added programmatically, although it functions properly when toggling the class in Chrome

Attempting to create an animation for the transform of a div. Below is the code with transition and transform properties in Safari: #mydiv{ transition: all 2.3s cubic-bezier(1, 0, 0, 1); transform: scale(0.5); background:white; padding:30 ...

jquerycsscss-transitionscss-transforms

Problem with logo in MVC4 apps

I'm working on incorporating a logo into my MVC 4 website. When the logo is clicked, it should navigate to the home screen. In order to achieve this, I've added the following code snippet in the _Layout.cshtml file. <a href='<%= Url.A ...

htmlasp.net-mvcasp.net-mvc-4

Creating a dynamic grid design with images using the <ul><li></li></ul> HTML tags

Trying to create a responsive grid of images that adapts to changes in browser size. Is there a way to achieve this using a list? Ideally, I want the images to be evenly spaced in rows. For example, if there are three rows of four images on top and one r ...

htmlcss

There seems to be an issue with configuring placeholders in Tailwind CSS

After deciding to switch to using only tailwind CSS, I noticed that on a particular page there were inputs with transitions but no icon on the inner left side. Adjusting the colors and position of the placeholder helped prevent collisions between the icon ...

htmltailwind-css

Guide to customizing action button color on MatSnackbar?

Currently, I am encountering an issue with the snackbar in my Angular 9 project. Despite adding CSS styles to both the component.scss file and the global style.scss file, the action button on the snackbar displays the same background and text color. In an ...

htmlcssangulartypesangular-material

How to Turn Off Hover Effect in Essential Grid for Mobile Devices

My website, tyloz.com, features four panels on the homepage that act as landing pages. These panels have a hover effect that also works on mobile devices. However, I am looking to disable the hover and double tap functionality specifically on phones. Is th ...

jquerycsswordpresspluginsmousehover

The web application located on the server is having trouble recognizing and loading the stylesheet

After deploying the web app on MS Server 2008 R2, I noticed that it is not reading the style sheets on any of the pages. The masterpage only contains a ToolkitScriptManager with no styles. However, the source code shows the style links and accessing them d ...

asp.net.netcsswindows-server-2008-r2