What is the best way to design a dynamic gallery that showcases three columns for large screens, but switches to two columns for mobile devices?

My goal is to create an image gallery using Bootstrap, with 3 columns on large screens and 2 columns on mobile. I want to maintain the aspect ratio of each image while fixing the width so they align within the columns. I was able to achieve this on large screens, but ran into issues on mobile devices. On mobile, the last column just stacks below the first one. I believe I need to rethink my approach to have the images fill up all available space. While I looked into other posts, they focused on images with similar aspect ratios. I'm considering that Bootstrap might not be the best solution, but I'm unsure of the next steps.

This was my attempt:

<div class="container">
        <div class="row">
            <div class="break"></div>
            <h4 class="headline text-center">illustrations.</h4>
            <div class="break"></div>
            <div class="col-md-4 fcontainer">
                <div class="row iframe">
                    <img class="item" src="Assets/Illustrations/Test3.jpg" alt="Test6">
                </div>
                <div class="row iframe">
                    <img class="item" src="Assets/Illustrations/Test4.jpg" alt="Test5">
                </div>
                <div class="row iframe">
                    <img class="item" src="Assets/Illustrations/Test6.jpg" alt="Test4">
                </div>
                <div class="row iframe">
                    <img class="item" src="Assets/Illustrations/Test1.jpg" alt="Test3">
                </div>
                <div class="row iframe">
                    <img class="item" src="Assets/Illustrations/Test5.jpg" alt="Test2">
                </div>
                <div class="row iframe">
                    <img class="item" src="Assets/Illustrations/Test2.jpg" alt="Test1">
                </div>
            </div>
            <--! multiply above div 2 more times for 3 columns -->
        </div>
    </div>
    <div class="break"></div>
htmlcssbootstrap-5

Answer №1

To ensure proper display on mobile devices, use col-4, and for larger screens, use col-md-6. https://getbootstrap.com/docs/5.3/layout/grid/#grid-options

<!doctype html>
<html lang="en>
  <head>
    <meta charset="utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796a6d3c8d5c8d6cb878a968e87d7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet>
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet>
    <title>Bootstrap Example>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984849f989f998a9babdec5d8c5dbc68a879b838ada">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-row>

    <!-- Example Code -->
    
    <div class="container text-center>
      <div class="row>
        <div class="col-4 col-md-6>col-sm-4</div>
        <div class="col-4 col-md-6>col-sm-4</div>
        <div class="col-4 col-md-6>col-sm-4</div>

        <div class="col-4 col-md-6>col-sm-4</div>
        <div class="col-4 col-md-6>col-sm-4</div>
        <div class="col-4 col-md-6>col-sm-4</div>
      
      </div>
    </div>
    
    <!-- End Example Code -->
  </body>
</html>

Answer №2

After some exploration, I finally figured out how to achieve my desired result. All I had to do was duplicate the gallery-item div for each image in the gallery.

.gallery-container{
    max-width: 86%;
    margin: 0 auto;
}
.gallery-container .gallery{
    columns: 3;
    gap: 10px;
}
@media (max-width: 600px) {
    .gallery-container .gallery {
        columns: 2 !important;
    }
}
.gallery-container .gallery img{
    width: 100%;
}
.gallery-item{
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0 0 10px 0;
}
<div class="gallery-container">
  <div class="gallery">
    <div class="gallery-item">
      <img>
    </div>
  </div>
</div>

Answer №3

This code snippet focuses on pure CSS rather than utilizing Bootstrap. Feel free to ask any questions in the comments below.

html { font-size: 22px; }
body { padding: 1rem; }

.card {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;
}

.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr)
}
   
@media (max-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); 
}
 
<div class="cards">
  <div class="card">ONE</div>
  <div class="card">TWO</div>
  <div class="card">THREE</div>
  <div class="card">FOUR</div>
  <div class="card">FIVE</div>
  <div class="card">SIX</div>
  <div class="card">SEVEN</div>
  <div class="card">EIGHT</div>
  <div class="card">NINE</div>
  <div class="card">TEN</div>
  <div class="card">ELEVEN</div>
  <div class="card">TWELVE</div>
</div>

To customize the layout for different screen sizes, utilize media queries as shown below:

@media (max-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); 
}

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

Design a food selection with only CSS and HTML

I am working with a menu structure that looks like this: <ul class"menu"> <li> <a>item1</a> <ul> <li><a>subitem1</a></li> <li><a>subitem2</a></li> &l ...

htmlcssmenu

Issue with CSS background scaling bug

Is it possible to make the cloud background scale within the box? The current issue can be viewed here: I have tried various methods to resolve the problem where the background scales even beyond the limited box. However, I could not identify the solutio ...

htmlcssanimationbackground

Top ways to avoid default on anchor tags: best practices for preventing this issue

Previously, excluding the criticism for not using unobtrusive JS, I typically employed anchors with inline onclick attributes for AJAX loading in the following format: <a href="http://example.com/some/specific/link.php?hello=mum" class="menu" id="m ...

javascripthtml

Utilize JavaScript and jQuery to extract the selected text's context from a webpage

I'm looking to extract the contextual information surrounding a selected text on a web page, specifically the 25 words before and after it. I've tried using JavaScript and jQuery with the following code snippet but unfortunately, it doesn't ...

javascriptjqueryhtmljquery-ui

Having trouble incorporating custom CSS into my Rails/Bootstrap project

I’m having trouble figuring out what I’m doing wrong. I’ve added custom files and tried to override the existing ones. application.css.scss @import 'bootstrap-sprockets'; @import 'bootstrap'; /* * This manifest file will be co ...

cssruby-on-railstwitter-bootstrap

The content div in CSS is causing the menu div to be displaced

I have encountered a difficulty in describing the issue at hand as I am still in the learning phase and consider myself a beginner. Within my container div, there are two other divs - one for the menu and another for the content. Both of these divs float ...

csshtmllayout

How can I achieve rounded corners in Internet Explorer using JQuery?

I've tried using various plugins like curvycorners, DD_roundies, and behavior: url(ie-css3.htc);, but none of them seem to work properly. Can anyone suggest alternative methods for achieving rounded corners in IE? My website is designed to be resizabl ...

jquerycssinternet-explorerrounded-cornerscurvycorners

Is it possible to implement formvalidation.io in a React project that is using Materialize-css?

Can the formvalidation.io plugin be used with React and Materialize-css in a project? My project consists of multiple input components that may or may not be within a form. I want to utilize formvalidation for input validation. However, I am unable to find ...

javascripthtmlreactjsmaterializeformvalidation.io

Unexpected results with mix-blend-mode difference

I am struggling with making a black text element overlap a black div while ensuring that the overlapping part of the text appears white. I attempted to use the mix-blend-mode property, but it does not seem to be working as expected. Why is this happening? ...

htmlcss

Tips for updating the background color of a select option

I'm looking to customize the background color of select options in my Bootstrap 4 form. Can anyone provide guidance on how to achieve this? `` <div class="form-group "> <select class="form-control > <option va ...

htmlcssbootstrap-4

What could be causing my Font Awesome 6.1.1 icons to not show up after loading?

I'm currently enrolled in Brad Traversy's 50 Projects 50 Days course. On Day 26, which focuses on the Double Vertical Slider project, I noticed that the Font Awesome CDN being used is version 5.15.1, an outdated version. I have updated it to vers ...

htmlcss

Enhancing the layout of an ASP.NET master page with an HTML table that extends beyond the

My ASP.NET (VB) master page contains a table with 9 columns, each intended to hold textboxes. However, even without textboxes, the cells are extending beyond the content margins. How can I adjust them to fit within the master page margins? If they still ...

asp.nethtmlcssvb.netmaster-pages

The issue I'm facing is that the style loader is failing to load the CSS within the <head

I am currently facing an issue with importing my CSS into my webpack bundle for our Angular 1 application. Initially, everything was working fine as we bundled our application using Webpack. The HTML included the bundle and vendor scripts, additional Java ...

javascriptcssangularjswebpackwebpack-style-loader

Looking to design a popup using CSS styles

How can I design a pop-up window using CSS for a specific div? I also want to display additional information within another div inside the popup. ...

csshtml

When the text starts to overlap the column completely at approximately 700 pixels wide

Previously, everything was working fine until it suddenly broke. The column system switches to a 100% width single column at 1500px, but for some reason, the text overflows off the screen around 700px and I can't figure out why. The text at the bottom ...

htmlcss

Take away the dropdown selection once the form has been submitted

Every day, a user fills out a form ten times. They choose an option from the dropdown menu, fill out the form, and submit it. I am looking for a solution to either remove the selected option once it's been submitted or mark it as complete by highlight ...

javascripthtmlajax

What are the steps for implementing Ajax in Django templates?

Looking to implement Ajax within Django templates? urls.py from django.conf.urls import patterns, url urlpatterns = patterns('', url(r'^home/$', 'views.index'),) views.py from django.template import RequestContext fro ...

pythonhtmlajaxdjangodjango-templates

Altering the color of text in hyperlinks within a list

Recently, I've started exploring CSS styling and I'm curious if there is a more effective way to change the color of link text when they are within a list. Currently, all my links have the same color and I'd like to enhance this aspect. < ...

htmlcsscolorshyperlinkstyling

Emphasize multiple anchor points

I am looking to highlight two sections of a page simultaneously. Here is what I currently have: <li class="langLI" style="list-style-type:none"><a href="/non-discrimination-and-language-assistance##French">| French Creole</a></li> ...

htmlcss

Utilizing CSS Grid to create a modern layout design featuring a fullwidth header and footer,

I have a traditional website layout with a header, main content area with a sidebar, and a footer. I want the header and footer to span the entire width on wider screens, while the main content and sidebar are fixed width, surrounded by whitespace. When th ...

htmlcsspositioncss-grid