Inequality in spacing between Bootstrap columns

I am currently working on a website where the home page has columns with icons and text. The issue arises on mobile devices as the columns stack unevenly due to varying text lengths, resulting in inconsistent vertical spacing. Is there a way to ensure consistent spacing for these columns in mobile view?

(To see the spacing problem I mentioned above, run the code snippet below and switch to full-page mode)

.info-blocks {
  margin-bottom: 15px;
  /* background: #efefef; */
}

.info-blocks i.icon-info-blocks {
  float: left;
  color: #FFEB3B;
  font-size: 30px;
  min-width: 50px;
  margin-top: 7px;
  text-align: center;
  background: #002e5b;
  width: 72px;
  height: 72px;
  padding-top: 7px;
  border: 1px solid #002e5b;
  border-radius: 50%;
}

.info-blocks .info-blocks-in {
  padding: 0 10px;
  overflow: hidden;
}

.info-blocks .info-blocks-in h3 {
  color: #002e5b;
  font-size: 18px;
  line-height: 28px;
  margin: 0px;
  margin-bottom: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.info-blocks .info-blocks-in p {
  font-size: 14px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>

<br>
<body>
<div class="container">
<div class="row">
  <div class="col-sm-4 info-blocks">
    <i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
    <div class="info-blocks-in">
      <h3>Explore</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-4 info-blocks">
    <i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
    <div class="info-blocks-in">
      <h3>Explore</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut magna eleifend, fermentum arcu et, euismod neque. Sed ante elit.</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-4 info-blocks">
    <i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
    <div class="info-blocks-in">
      <h3>Explore</h3>
      <p>Lorem Ipsum</p>
    </div>
  </div>
</div>
</div>
</body>

cssbootstrap-4

Answer №1

To set a specific height for .info-blocks .info-blocks-in, you can use the following snippet and test it on various screen widths:

.info-blocks {
  margin-bottom: 15px;
}

.info-blocks i.icon-info-blocks {
  float: left;
  color: #FFEB3B;
  font-size: 30px;
  min-width: 50px;
  margin-top: 7px;
  text-align: center;
  background: #002e5b;
  width: 72px;
  height: 72px;
  padding-top: 7px;
  border: 1px solid #002e5b;
  border-radius: 50%;
}

.info-blocks .info-blocks-in {
  padding: 0 10px;
  height:80px; /* set your desired height here */
  overflow: hidden;
}

.info-blocks .info-blocks-in h3 {
  color: #002e5b;
  font-size: 18px;
  line-height: 28px;
  margin: 0px;
  margin-bottom: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.info-blocks .info-blocks-in p {
  font-size: 14px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>

<br>
<body>
<div class="container">
<div class="row">
  <div class="col-sm-4 info-blocks">
    <i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
    <div class="info-blocks-in">
      <h3>Explore</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-4 info-blocks">
    <i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
    <div class="info-blocks-in">
      <h3>Explore</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut magna eleifend, fermentum arcu et, euismod neque. Sed ante elit.</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-4 info-blocks">
    <i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
    <div class="info-blocks-in">
      <h3>Explore</h3>
      <p>Lorem Ipsum</p>
    </div>
  </div>
</div>
</div>
</body>

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

Resizing anchor element using CSS

Hey there, I'm having trouble scaling my anchor tag when hovering over it. Here's the code I'm using: a { color: red; text-decoration: none; transition: all 0.5s; } a:hover { ...

htmlcssanchor

What is the best way to elegantly display a block containing background and text using Angular and ngAnimate?

I'm a beginner when it comes to JavaScript and Angular. I am attempting to use ng-show and ng-hide for my background and text elements. However, I am experiencing an issue with my text: It smoothly hides, but when it is shown again, the text appears b ...

javascriptcssangularjsng-animateng-show

Expanding divisions vertically without the constraints of fixed heights

Instead of resorting to fixed heights and absolute positioning with top: and bottom:, I'm challenging myself to find a CSS solution without using those methods. I want to explore different ways to solve this problem and enhance my skills. I have a st ...

htmlcss

What steps should be taken to enlarge a checkbox within a table?

I need help with resizing the checkboxes that are inside a table. When I try using width:###px; height:###px;, it only seems to make them smaller, not bigger. Even when I set the values higher than the default size, the checkboxes stay the same while the d ...

htmlcsscheckboxhtml-tableresize

Ways to deactivate webfonts specifically for Safari

Recently, I have been experiencing font crashing issues with the webfont on Safari. Is there a way to disable this font specifically for this browser? ...

csssafaribrowser

Using CSS to enforce a specific height for text by overflowing its parent container horizontally

I have a lengthy phrase that takes up too much space on mobile devices. Here is an example: .artificial-phone-viewport { width: 320px; height: 500px; border: 1px solid darkgrey; } .container { width: 100%; height: 100%; } .text { /* * Do ...

cssoverflow

Disappearance of CSS borders when using jQuery scroll function

After implementing a fixed table header for an HTML table on my website, I encountered a minor issue. When scrolling down, the table header remains at the top as intended, but the CSS styling for borders within each <th> element disappears. The font ...

jquerycss

Determine whether there is greater available space above or below a specific element within the DOM

I'm looking to create a dynamic layout where an input field is accompanied by a list in a div, positioned either above or below depending on available space. This setup needs to account for the fact that the input field could be located anywhere on th ...

htmlcssangularjstypescript

Unable to update div CSS using button click functionality

I have been working on this HTML/CSS code and I am trying to change the style of a div using a JavaScript button click event so that the div becomes visible and clickable. However, despite my efforts, it doesn't seem to be working as expected. Whenev ...

javascripthtmlcss

Tips for resolving a top bar on the left side Grid with CSS without it covering the adjacent right side Grid element

I am currently working with material-ui and react, and facing an issue with the positioning of a top bar within a Grid element. The top bar is meant to be fixed in its position, but not at the very top of the page as it is inside a parent Grid element. I ...

htmlcssreactjsmaterial-ui

How do I get my navbar to change color using a JavaScript scroll function?

I've been struggling with changing the color of my navbar when it's scrolled. I have some JavaScript code at the bottom that should handle this, but for some reason, it's not working as expected. I've double-checked that my bootstrap CD ...

htmljquerycssscrollnavbar

What is the best way to position an image in the center for mobile screens?

Struggling to center an image for mobile devices, I have successfully done so for tablets and regular desktop devices. However, I am facing challenges in editing the code to ensure full responsiveness for mobile devices. Additionally, there is excess white ...

htmlcssmobile

Chrome causing the vanishing act of floated iframes

I encountered an unexpected issue on my website recently. For the past three years, everything was working smoothly until I updated Chrome to version 60. Now, whenever I try to load iframes from Archive.org, they momentarily appear and then vanish instantl ...

htmlcssgoogle-chromeiframe

Unlocking the Mysterious Realm of HTML

I recently stumbled upon a mysterious combination of HTML attributes: <div vanisheffect="true" blinkcolor="red" fadeopacity="0.8"> Have you ever encountered something like this? And more importantly, does it have any impact on specific browsers? Is ...

htmlbrowsercss

Styling the scroll bar within a fixed parent container's inner div with CSS

Check out the JSBIN link here: JSBIN The modules container has a fixed height of 100%. I am attempting to make the list items scroll while keeping the search div fixed within the wrapper container, ensuring that the search bar remains visible at all times ...

css

CSS media query to target specific viewport width

In my JavaScript code, I am dynamically creating a meta viewport. I set the value of this viewport to be 980px using the following script: var customViewPort=document.createElement('meta'); customViewPort.id="viewport"; customViewPort.name = "vie ...

javascripthtmlcss

Expanding the size of a textarea using JavaScript

JavaScript: function adjustRows() { var value = document.getElementById("test1").value.length; if (value <= 18) { value.rows = 1; } else if (value > 18 && value < 36) { value.rows = 2; } else if (value > 36 && v ...

javascriptjqueryhtmlcsstextarea

What can I do to prevent my HTML/CSS/jQuery menu text from shifting when the submenu is opened?

After encountering numerous inquiries regarding the creation of disappearing and reappearing menus, I successfully devised a solution that functions seamlessly on desktop and tablet devices. My approach involved utilizing the jQuery .toggleClass function w ...

jqueryhtmlcssmenu

Unable to modify the text color within a moving button

Working on a school project and implemented an animated button style from w3 schools. However, I'm struggling to change the text color within the button. Being new to HTML, I would greatly appreciate any insights or suggestions on what might be going ...

htmlcss

Highlight text when the user is scrolling the page - using JQUERY

Can anyone suggest a way to dynamically underline text as the user scrolls down a webpage? The underline should only be visible while the user is scrolling. I've experimented with animate.css and other plugins, but haven't been able to achieve th ...

javascriptjqueryhtmlcss