Responsive design can sometimes cause CSS float layouts to appear unbalanced

I have designed a grid with dimensions of "3x2" using media queries. The grid appears correctly on desktop, but when viewed on mobile it changes to a "2x3" grid. However, the issue arises when there is varying text length in each grid item. To prevent items from touching the row below, I added a margin to the bottom of each "item".

Upon running the code provided below, everything seems to be working fine. The problem occurs when there are discrepancies in text lengths, causing misalignment of rows in the grid.

.wrap {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 500px) {
.wrap {
    width: 90%;
    margin-left: auto;
    nargin-right: auto;
}
}

.container {
    display: table;
    width: 100%;
}

.item {
    width: 33.3%;
    float: left;
    margin-bottom: 10px;
}

@media only screen and (max-width: 500px) {
.item {
    width: 50%;
    float: left;
    margin-bottom: 15px;
}
}

.item-info {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.item-icon{
    width: 50px;
    height: 50px;
    background: url(https://via.placeholder.com/50x50) bottom no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;
<div class="wrap">
   <div class="container">
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      
      (Remaining HTML code for other items)  

   </div>
</div>

The code functions well in this layout:
https://i.sstatic.net/ZVMPA.png

However, the grid's rows become misaligned when text lengths differ:
https://i.sstatic.net/iS4k6.png

If anyone has suggestions on how to ensure all rows have the same height as the largest element within them on mobile devices (or any other solution), your input would be greatly appreciated.

htmlcss

Answer №1

To resolve this issue, the best approach is to utilize the 'clear' property. You can refer to my solution below for a successful implementation:

.wrap {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 500px) {
.wrap {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
}

.container {
    display: table;
    width: 100%;
}

.item {
    width: 33.3%;
    float: left;
    margin-bottom: 10px;
}

// include this section
.item:nth-child(3n + 1) {
clear: both;
}

@media only screen and (max-width: 500px) {
.item {
    width: 50%;
    float: left;
    margin-bottom: 15px;
}

// include this section
.item:nth-child(3n + 1) {
clear: none;
}

.item:nth-child(2n + 1) {
content: "";
clear: both;
display: table;
}
}

.item-info {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.item-icon{
    width: 50px;
    height: 50px;
    background: url(https://via.placeholder.com/50x50) bottom no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;
<div class="wrap">
   <div class="container">
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
   </div>
</div>

Answer №2

I stumbled upon a temporary solution that may not be the ideal way to go about it, but it serves as a quick fix for now by ensuring uniform height for all elements.

.wrap {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 500px) {
.wrap {
    width: 90%;
    margin-left: auto;
    nargin-right: auto;
}
}

.container {
    display: table;
    width: 100%;
}

.item {
    width: 33.3%;
    float: left;
    margin-bottom: 10px;
}

@media only screen and (max-width: 500px) {
.item {
    width: 50%;
    float: left;
    margin-bottom: 15px;
    height: 150px;
}
}

.item-info {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.item-icon{
    width: 50px;
    height: 50px;
    background: url(https://via.placeholder.com/50x50) bottom no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;
<div class="wrap">
   <div class="container">
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </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

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

Attempting to use list elements in HTML to generate a table

I am having trouble creating a table that looks like this. I have never made a table like this before and would appreciate any guidance on how to achieve this style. Please help me out! All suggestions are welcome. Below is the code snippet that I plan to ...

htmlcss

Is it a bug if we utilize AngularJS to retrieve data for <li><a href>?

Using AngularJs, I am able to retrieve data from a MySQL database for my navigation bar on an HTML5 page. However, there seems to be an issue with opening links in the sub menu. Below is a snippet of my code: <div id="header-wrapper" class="wrapper"> ...

javascriptjqueryhtmlcssangularjs

Exchange one HTML element with a different HTML element

I've been attempting to change an HTML tag using PHP or jQuery. The current default tag is: <li class="dropdown"> <a href="index.html" class="dropdown-toggle"> Home</a></li> My desired replacement for the above HTML tag is: ...

javascriptphpjqueryhtmlcss

Why does the <select> dropdown flash when I select it?

Currently utilizing Angular 1.3 and Bootstrap 3.3.x CSS without the JS functionality. There is also an interesting animated GIF embedded within. <div class="form-group"> <div class="col-lg-3"> <label clas ...

javascripthtmlcssangularjs

One way to eliminate a prefix from a downloaded file path is by trimming the URL. For example, if you have a URL like "http://localhost

As my web app runs on port number, I am looking to download some files in a specific section. However, the download file path is being prefixed with "". <a href={file_path} download={file_name}> <Button variant={"link"}> <b>Dow ...

javascripthtmlreactjsreact-reduxreact-bootstrap

The divs are being filled with Bootstrap's separater and list-group components

Check out my pen: http://codepen.io/helloworld/pen/yyoJGR I'm wondering about why the white separator and list grouping are flowing through the divs or the parent row in this code? <div class="container columnStyle"> <div class="row"> ...

htmlcsstwitter-bootstrap-3

What is the best way to save Arabic text in a MySQL database from an HTML form using PHP?

I've been searching extensively, but have had no luck! >> Following the PHP connection I included: mysql_set_charset('utf8', $conn); >> The form input tag has the attribute: accept-charset="utf-8" >> I confirmed that the d ...

phphtmlmysqlutf-8arabic

Grayscale to color image slider using JQuery, HTML, and CSS

Seeking assistance from the talented individuals here. Currently in the process of constructing a website for a client, and one of the key components on the index page is an image slider/fader that showcases a series of images. The client has requested a u ...

htmljquery-uicss

Is it possible to dynamically update the contents of a modal body and modal footer using

I'm dealing with a modal that dynamically populates two sections: modal-body and modal-footer. However, the issue is that only the content of modal-body changes dynamically while modal-footer remains static. Here's an example of the HTML code (w ...

javascriptjqueryhtml

What is the best way to apply an animation class to a modal upon clicking a button?

When I click the "x" button on the modal, I want the animation to occur. However, what currently happens is that the modal closes without the animation. Then, upon reopening the modal, the animation occurs without any clicking involved. Below is my curren ...

javascripthtmlcssbootstrap-5

What is the number of steps jQuery animates in?

Exploring my creative side, I decided to create my own custom animate function. Struggling to achieve a seamless animation effect, unlike the smooth transitions produced by jQuery. I'm curious about the formula they utilize to determine the ideal num ...

javascriptjquerycssalgorithmanimation

Changing the order of Bootstrap columns

Below is the code snippet I am using in Bootstrap- .message-preview { background-color: green; height:100px; } .inbox-preview { background-color: blue; height:100px; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap. ...

htmlcsstwitter-bootstrap

Issue with CSS margin-top not displaying properly in Firefox and Internet Explorer, but working fine in Chrome and Opera

I'm encountering difficulties with the margins on my website. It seems like margin-top isn't functioning properly in Firefox and IE, even though it is working correctly in Chrome and Opera. Despite trying various techniques and searching online f ...

htmlcssinternet-explorerfirefoxgoogle-chrome

The functionality of Jquery to update the display styling using CSS is not functioning properly

Here is the code snippet: <script type="text/javascript> $(window).load(function(){ debugger $('#comp').ready(function() { $('#QV101').css("display", "inline"); $(' ...

jquerycssdisplay

Solved the issue of inconsistent element height and jumping on mobile devices during scrolling

Problem persists with the fixed element at the bottom of my mobile device when I scroll. It seems that the height is recalculated each time due to an increase in document height on mobile devices. The issue appears to be related to the address bar fading ...

htmlcss

What level of consistency does the canvas.toBlob() method maintain across various web browsers?

Looking into converting Canvas contents to a Blob, I wanted to explore the support of the native method canvas.toBlob() across different browsers. How reliable is this method in various browser environments? Unfortunately, information about this isn't ...

htmlhtml5-canvas

Combining a background image with a contrasting background color in email design

Is it possible to create an email template with a table that has an image as a background, but also includes a substitute background color for platforms that don't display the image by default? I've experimented with the code below: <table b ...

htmlcssemailbackground

The rotation of an image in Microsoft Edge results in an HTML file display

One of the images on my website is sourced like this: <p> <img src="images/image.jpg" style="width: 50%;" /> </p> Surprisingly, in Chrome and Firefox, the image looks fine (just how I uploaded it to the server). H ...

htmlcssimageorientation

Manually adjusting the aria-expanded attribute to "true" does not result in opening a new tab

After a certain condition is met, I want to open another tab. Below is my bootstrap navbar code along with the jQuery script. <ul class="nav navbar-default nav-justified" role="tablist" id="navbar"> <li role="presentation" class="active"><a ...

javascriptjqueryhtmltwitter-bootstrap