Proportional fluid image grid with responsive design

After implementing various media queries, I've managed to create an image grid using Bootstrap 4+ that looks great on specific devices and layouts. Here's the reference code:

.cmd-three-img-container {
  position: relative;
  margin-bottom: 30px;
  height: 320px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 768px) {
  .cmd-three-img-container {
    height: 200px;
  }
}

/* Additional CSS properties here */

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="cmd-three-imggrid-area">
  /* Image grid code here */
</div>

My goal is to maintain the proportionality of the Three Image grid across different devices such as desktop, mobile, and iPad. The total grid size should be fluid and adjust smoothly based on the device layout. Thank you for your help in advance!

javascripthtmlcssflexboxbootstrap-4

Answer №1

The issue lies in the fixed height specified for .cmd-three-img-container. This prevents responsiveness from working properly. I have removed the fixed height and also modified the height of .cmd-main-img to min-height: 100%. Your code has been updated accordingly.

.cmd-three-img-container {
  position: relative;
  margin-bottom: 30px;      
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}


.cmd-main-img {
  width: 50%;
  min-height: 100%;
  margin-left: 5px;
  cursor: pointer;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.cmd-main-img img {
  width: 100%;    
  height: 100%;
  object-fit: cover;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.cmd-img-stacked {
  width: 50%;
  height: 100%;
  cursor: pointer;
}

.cmd-img-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
}

.cmd-img-overlay h4 {
  float: right;
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  font-family: "Rubik", sans-serif;
}

.cmd-top-img,
.cmd-bottom-img {
  width: 100%;
  height: calc(50% - 2.5px);
  cursor: pointer;
}

.cmd-top-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-position: center;
  border-top-left-radius: 4px;
}

.cmd-bottom-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-position: center;
  border-bottom-left-radius: 4px;
}

.cmd-top-img {
  margin-bottom: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="cmd-three-imggrid-area">

  <div class="container-fluid px-5-percent">
    <div class="row">

      <div class="col-sm-3">
        <div class="cmd-three-img-container">
          <!-- top level image container START-->
          <div class="cmd-img-stacked">
            <!--stacked img container -->
            <div class="cmd-top-img">
              <img src="https://i.imgur.com/H4bbqpA.jpg" alt="">
            </div>
            <div class="cmd-bottom-img">
              <img src="https://i.imgur.com/H4bbqpA.jpg" alt="">
            </div>
          </div>
          <div class="cmd-main-img">
            <!--Main image -->
            <img src="https://i.imgur.com/H4bbqpA.jpg" alt="">
          </div>
          <div class="cmd-img-overlay">
            <h4>Work</h4>
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="cmd-three-img-container">
          <!-- top level image container START-->
          <div class="cmd-img-stacked">
            <!--stacked img container -->
            <div class="cmd-top-img">
              <img src="https://i.imgur.com/H4bbqpA.jpg" alt="">
            </div>
            <div class="cmd-bottom-img">
              <img src="https://i.imgur.com/H4bbqpA.jpg" alt="">
            </div>
          </div>
          <div class="cmd-main-img">
            <!--Main image -->
            <img src="https://i.imgur.com/H4bbqpA.jpg" alt="">
          </div>
          <div class="cmd-img-overlay">
            <h4>Work</h4>
          </div>
        </div>
      </div>
      // Rest of the code is unchanged
    </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

Implementing Axios interceptor is a common practice in Vue.js applications to central

Hello everyone, I'm facing a problem with the interceptor in VueJS. I can't seem to figure out where the issue lies and it's driving me crazy... I've gone through various tutorials and read numerous posts on stackoverflow, but everythi ...

javascriptvue.jsaxiosinterceptores6-modules

Issue: ui-route failing to function properly when the href attribute is utilized

I am currently working on implementing ui-route to manage the states of my app while focusing on URL navigation. My goal is to enable users to simply click on a link and be directed to the state associated with the specific URL. After following an In-Dep ...

javascriptangularjsangular-ui-router

Ways to capture the value of several images and add them to an array

When working on a multiple file upload task, I encountered the need to convert images into base64 encoded strings. My form consists of two fields, one for first name and another for image upload. The user can enter their name, upload multiple photos, and c ...

javascriptjqueryjsonforeachbase64

Aligning icons and text vertically in a list

I've encountered this issue multiple times and I'm always unsure of the best approach to resolve it. Here is a screenshot for better context: This is what it should look like... .container { max-width: 360px; font-size: 16px; } .talking-poin ...

htmlcssvertical-alignment

Is it possible for a nonce to be utilized for multiple scripts, or is it restricted to

Exploring the Origins About a year ago, our company embarked on a journey to implement CSP throughout all our digital platforms. Each of these platforms was built using an express.js + react framework. In order to adhere to the guideline that "Each HTTP r ...

javascriptnext.jsnoncecontent-security-policy

What are some effective ways to optimize a scrolling script?

Within my div element, I have a list of ordered elements (ol) that I am manipulating with drag and drop functionality using jQuery Nestable. If you could help me troubleshoot this issue, it would be greatly appreciated: How to scroll the window automatical ...

javascriptjqueryscrolljquery-animate

Describe a Typescript Interface Value as a collection of strings or any input provided as an argument

Uncertain if the question title is accurate - currently developing react components within a library that has specific predefined values for certain properties. However, additional values may need to be added on a per usage basis. So far, this setup is fun ...

javascriptreactjstypescriptcomponents

Preview of Live Iframe Display

Currently, I am in the process of developing a node.js website that enables users to create and customize their own page using a dashboard interface. One specific feature I would like to incorporate is a live preview capability, similar to what Shopify o ...

javascriptnode.jsmongodbiframe

I'm looking to combine multiple RSS feeds into a single feed, then transform the combined feed into JSON data using JavaScript. How can I achieve this?

I have been experimenting with merging multiple RSS feeds into one and converting it to JSON format. For combining the feeds, I utilized the following package: rss-combiner Below is the code snippet that successfully combines the RSS feeds: var RSSCombin ...

javascriptjsonnode.jsrss

Saving the data retrieved from a fetch request at a specified URL into a variable in JavaScript

I'm having some trouble loading data from a URL into a variable using .ready(). When I try to display the value in an alert box, it shows up as undefined. Can anyone offer some guidance on how to fix this? const fetchMasterProd = () => { ...

javascriptjqueryjson

How can I dynamically retrieve the width of an image in React as the screen size changes?

I have successfully implemented an image hover effect on my website. When I hover over a certain text, an image appears. The image is responsive, but I am facing an issue where I want the width of the text to be equal to the width of the image. When I resi ...

javascriptreactjshtml

Updating the language of the months displayed in the popup calendar

I am attempting to change the language of the clickDate function from English (Jan, Dec, etc.) to another language. However, I am struggling to find a way to do so because I only have access to the scripts provided below. The idate is in the format 2015073 ...

javascriptphp

Combining package.json commands for launching both an Express server and a Vue app

I recently developed an application using Vue.js and express.js. As of now, I find myself having to open two separate terminal windows in order to run npm run serve in one and npm start in the other. My ultimate goal is to streamline this process and have ...

javascriptexpressvue.jsnpmnpm-scripts

Is there a way to trigger a JavaScript function once AJAX finishes loading content?

I've been utilizing some code for implementing infinite scrolling on a Tumblr blog through AJAX, and it's been performing well except for the loading of specific Flash content. The script for the infinite scroll can be found here. To address the ...

javascriptjqueryajaxflashtumblr

Learn the process of uploading multiple xml files in PHP

I am trying to figure out how to read multiple XML files with different names. For example, I have three XML files in the folder (/data/data/www/) named Message.xml, example.xml, and data.xml. Currently, I am only able to read one file. How can I modify my ...

phphtmlxmlfile

Presenting information on a webpage using a URL parameter to create an unordered list

I'm looking to automatically display a specific page from an unordered list of navigation links without the user needing to interact with the page. Is there a way to accomplish this using a URL string? Any suggestions or solutions would be greatly ap ...

javascriptjquery

How can I stop the space bar from activating its default action unless I am inside an input field

If we want to stop the default scrolling behavior when pressing the space bar on the document, we can use the following code snippet: $(document).keypress(function(event) { event.preventDefault(); }); However, this approach won't work if there ar ...

jqueryhtml

Tips for achieving an AJAX-like appearance in jQuery for my code

The question may seem a bit confusing, but here's the basic idea: I'm currently working on a JavaScript library and I want to incorporate some of jQuery's style. I have a function that will take in 3 parameters, and I want it to work simila ...

javascriptjqueryajax

Using `ngRepeat` on a different array of values for repetition

Working with AngularJS. Here is an example of a JSON object: "skills": { "Charisma": {}, "Dexterity": { "Sk3": [ [ true, true, true, true, false ], 44 ] }, ... And the corresponding HTML: <div class="pan ...

javascripthtmlangularjs

Next.js Static Paths Filtering

How can I retrieve only filtered paths from getStaticPaths? This function currently returns all posts export async function getStaticPaths() { const { data } = await axios.get(`${url}/category`, config); const paths = data.map((post) => { ...

javascriptnext.js