What is the best way to design lists that adjust to different screen sizes by incorporating multiple columns within the available width?

Back in my old fixed-width days, I had a clever method of distributing data across three columns by dividing the number of elements by three. It worked pretty efficiently.

Now in this modern responsive world, my current solution involves splitting data into fixed-size buckets (let's say 5) and floating the chunked lists to the left:

While this method is effective for longer lists, it can result in wasted horizontal pixels when dealing with smaller lists. Additionally, if one element happens to be extra wide, it can disrupt the flow of the layout.

Currently, I am using Bootstrap3 but I'm open to exploring a pure CSS solution for this issue.

Is there an optimal way to create responsive multi-column lists that adapt to the available width on different devices?

htmlcssresponsive-designtwitter-bootstrap-3

Answer №1

Imagine creating three responsive columns side by side:

Update: included a media query to transform the 3 columns into 1 column

Check out the jsFiddle here

<div class="outer">
    <div class="inner1">Hello</div>
    <div class="inner2">World</div>
    <div class="inner3">!</div>
</div>

.outer {
    width: 100%;
}
.inner1 {
    clear: both;
    float: left;
    display:inline-block;
    width: 32%;
}
.inner2 {
    display:inline-block;
    width: 32%;
    margin-left: 2%;

}
.inner3 {
    display:inline-block;
    width: 32%;
    margin-left: 2%;
}

@media only screen and (max-width: 420px) {   /* small mobile sizes */

.inner1, .inner2, .inner3 {
    display:block;
    width:100%;
    }
}

This updated Fiddle now includes the media query that converts the 3 columns layout into a single column on screens with widths of 420 pixels or less

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

Customizing Bootstrap css variables for a unique design

Currently, I'm working on tweaking the data-bs-theme in Bootstrap 5.3. My goal is to adjust the pre-defined CSS variables of the Bootstrap dark theme and refresh the color palette. Specifically, I want to change the shade of blue for my blue button (b ...

cssthemesoverridingbootstrap-5

Equal vertical alignment in the center using flexbox

My flexbox layout is set up as shown in the code snippet below: html { height:100%; width:100%; } body { display:flex; flex-direction:column; align-items:stretch; height:100%; width:100%; margin:0; background-color:grey; } header { b ...

htmlcssflexboxvertical-alignment

The Colorful World of CSS Backgrounds

I've been searching for hours trying to track down the source of this strange greenish background color. I've combed through every single file and it's starting to drive me insane. Any ideas where this color could be coming from? I highly d ...

javascripthtmlcss

What's the best way to search through various addresses for the source in an image tag?

In my current Laravel 5.8 project, I am faced with the task of searching through three different image sources for an img tag. First, I attempt to load the image from "". If that fails, I try a second URL like "". Should both attempts be unsuccessful, I th ...

phphtmllaravel

I incorporated a YouTube video using the iframe tag, but encountered an issue where the page would not scroll up or down when the mouse cursor was positioned on the iframe

How would you like your HTML code to function? When the cursor is on the iframe, do you want it to play a video? Also, should the parent page scroll when you scroll? <section class="section section-padding"> <div class="container"> ...

csshtmlbootstrap-4

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

When reducing the page size, the Bootstrap columns are colliding with

While resizing the screen, I noticed that these images are overlapping each other. I haven't made any changes to the css for container-fluid or row. <div class="container-fluid bg-grey"> <div class="row center"> <div class= ...

htmlcsstwitter-bootstrap

Inner box shadow obscured by a sibling div

I am facing an issue with a div that has an inner box shadow being covered by another div. I have tried using position: relative, but it did not solve the problem. Here is an example: CODE EXAMPLE .example-div{ background:#fff; color:#000; ma ...

htmlbox-shadow

Arranging links in a horizontal line (JSFiddle)

CodePen: https://codepen.io/example/abc123 I am attempting to align the elements "Favourite", "0", and "Reply" next to each other so they appear as: Favourite 0 Reply ...

cssasp.net

Here's a way to align big text in the center while aligning small text at the bottom

How can I position two text blocks on the same line in HTML, with one text block having a larger font size and vertically aligned in the middle, while the other text block sits lower to create a cohesive design? To better illustrate what I mean, I have cre ...

htmlcssvertical-alignmentfont-size

caption sliding into the incorrect div box

As I continue my journey of learning CSS, I've encountered a puzzling issue involving slide-in captions within a different div element. The problem arises when I try to customize the appearance of the caption to better fit the overall design of my web ...

htmlcssdivide

Is it possible to swap images by clicking on them?

Let's say I'm working with 3 images. Image A, B and C. A is the main image initially. If I click on image B, it will become the main image and image A will take its place in the old position. The same condition applies when B is the main image a ...

javascriptjqueryhtmlangularimage

One-of-a-kind Design: Linear Gradient Background Image

Can you help me with Linear Gradient? Is it feasible to incorporate an actual image instead of just displaying a color like #000000 or #ffffff? background-image: -webkit-linear-gradient(30deg, #000000 50%, #ffffff 50%); In the scenario mentioned above ( ...

htmlcss

Adjusting the opacity of images in a Bootstrap 4 Jumbotron without affecting the text

Is there a way to apply an opacity of 0.5 to only the background image in my jumbotron, without affecting the text? Currently, when I set the opacity for the background, it also affects the text. How can this be resolved? Below is the custom CSS file: .j ...

cssbootstrap-4

Displaying a pop-up window containing information retrieved from the console output

Upon user input in the form on my web application, an scp and ftp process is initiated that takes around 2-3 minutes to complete. The result page consequently experiences a similar delay in loading. To enhance user experience and provide real-time updates ...

htmlajaxspring-bootpopup

Ensure that the text box inside the div adjusts its size in accordance with the dimensions of the window, as the div is already designed

As a novice in HTML and jQuery, I am currently working on creating a portfolio site for a school project. One of the challenges I have encountered is designing a graphic that includes a text box within a resizable div element. My goal is to prevent excessi ...

htmlcsscss-position

Tips for using the window.print() function to display and print another php or html page

<script type="text/javascript> window.print('page.php'); //Can you help me understand how to use window.print() function to print another php or html page? ...

phphtmlcss

Question about Selecting Boxes

I'm looking for the name of the HTML tool that is used to create a list of objects from a select field. It typically consists of two boxes with an arrow in between them. For example, when creating a group, Box A would contain a list of users and you c ...

html

Having trouble with input event listeners in JavaScript?

I've been attempting to trigger the keyup event using EventListener for an input tag, but it doesn't seem to be working and I'm unsure why. Here is the code I have: document.getElementById("ajax").addEventListener("keyup", function() { ...

javascriptjqueryhtmlinput

Adding an image to an HTML <span> element using the class attribute "

I need help adding an image to my HTML code. For example, how can I specify which image should be displayed in place of the placeholders? Thank you for your assistance! ...

htmlcssimage