Creating a responsive bootstrap card-tall for mobile devices

Question

Creating a responsive bootstrap card-tall for mobile devices

I'm currently using Bootstrap cards to create a gallery-like display of images. To style the images, I'm also utilizing the card-tall class. Since these images are posters, they naturally occupy a lot of space.

Here's how it appears on the website:

https://i.sstatic.net/nlqy6.jpg

However, on mobile devices, it looks like this:

https://i.sstatic.net/pOQcX.png

The HTML structure for the posters is enclosed within a div:

 <div id = "all" class="photo-grid">
       <div class="card card-tall" style="background-image:url(./img/portfolio/poster1.jpg)" >
       </div>
       <div class="card card-tall" style="background-image:url(./img/portfolio/poster4.jpg)">
       </div>
</div>

Along with the CSS code:

* {
  box-sizing: border-box;
}
body {
  background: #fff;
  color: #fff;
  font-family: "Noto Sans", sans-serif;

}
.photo-grid {
  height: 100%;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 240px;
  margin-right: 10%;
  margin-left: 10%;
  margin-bottom: 3rem;
}
.card {
  height: 100%;
  width: 100%;
  border-radius: 4px;
  transition: transform 200ms ease-in-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (min-width: 600px) {
  .card-tall {
    grid-row: span 2 / auto;
  }
  .card-wide {
    grid-column: span 2 / auto;
  }
}



/* import fonts  */ 
 @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); 

/* css variables */ 
@import url(./partials/_variables.css); 

/* import global styling */ 
@import url(./partials/_global.css);

I need some assistance with this setup!

html css bootstrap-4 responsive-design bootstrap-cards

Answer 1

Answer №1

There are two primary purposes for incorporating images in HTML:

background-image - These images are not considered content and are displayed within the element's boundaries without altering its size.
Regular images: <img>s - These images are treated as content and, among other things, determine the size of their parent element (unless positioned outside the flow using position, which seems to be your objective).

The simplest way to ensure that an element's height fits the image without cropping is by using the background image as an actual <img>:

<div class="card card-tall" style="background-image:url(./img/portfolio/poster1.jpg)" >
  <img src="./img/portfolio/poster1.jpg">
</div>

...along with this CSS code:

.card-tall img {
  display: inline-block;
  width: 100%;
  height: auto;
  visibility: hidden;
}

Although the image will define the card's aspect ratio, what you see will still be the background-image due to the <img> element having a hidden visibility - it won't be rendered.

It's worth noting that this method doesn't add any extra weight to the page since the resource is the same for both the background-image and the <img>.

If you only want this behavior on particular screen sizes, encapsulate the CSS within the appropriate @media query.

To avoid custom CSS, apply these classes directly to the <img>:

<img src="./img/portfolio/poster1.jpg"
     class="d-inline-block w-100 h-auto invisible">

The drawback is that each utility class (like most Bootstrap classes) includes !important. For responsive design, if you don't want the images displaying on medium screens (md and up), use the d-md-none class (adjust as needed, e.g., d-sm-none, d-lg-none, etc.).

Note also that images can be added programmatically using the following jQuery script:

$(function() {
  $('.card-tall').each(function() {
    $(this).append($('<img />', {
      class: 'd-inline-block w-100 h-auto invisible',
      src: $(this).css('backgroundImage').replace('url("', '').replace('")', '')
    }))
  })
})

See it in action:

$(function() {
  $('.card-tall').each(function() {
    $(this).append($('<img />', {
      class: 'd-inline-block w-100 h-auto invisible',
      src: $(this).css('backgroundImage').replace('url("', '').replace('")', '')
    }))
  })
})

.card-tall {
  background-size: contain;
  background-repeat: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b10170c07101256181b2a38050911120e">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="card card-tall" style="background-image:url(https://picsum.photos/200/200)"></div>
    </div>
    <div class="col-sm-4">
      <div class="card card-tall" style="background-image:url(https://picsum.photos/200/300)"></div>
    </div>
    <div class="col-sm-4">
      <div class="card card-tall" style="background-image:url(https://picsum.photos/300/200)"></div>
    </div>
  </div>
</div>

Add the d-md-none class to limit the <img> display behavior to small screens (sm and below).

Answer 2

There are two primary purposes for incorporating images in HTML:

background-image - These images are not considered content and are displayed within the element's boundaries without altering its size.
Regular images: <img>s - These images are treated as content and, among other things, determine the size of their parent element (unless positioned outside the flow using position, which seems to be your objective).

The simplest way to ensure that an element's height fits the image without cropping is by using the background image as an actual <img>:

<div class="card card-tall" style="background-image:url(./img/portfolio/poster1.jpg)" >
  <img src="./img/portfolio/poster1.jpg">
</div>

...along with this CSS code:

.card-tall img {
  display: inline-block;
  width: 100%;
  height: auto;
  visibility: hidden;
}

Although the image will define the card's aspect ratio, what you see will still be the background-image due to the <img> element having a hidden visibility - it won't be rendered.

It's worth noting that this method doesn't add any extra weight to the page since the resource is the same for both the background-image and the <img>.

If you only want this behavior on particular screen sizes, encapsulate the CSS within the appropriate @media query.

To avoid custom CSS, apply these classes directly to the <img>:

<img src="./img/portfolio/poster1.jpg"
     class="d-inline-block w-100 h-auto invisible">

The drawback is that each utility class (like most Bootstrap classes) includes !important. For responsive design, if you don't want the images displaying on medium screens (md and up), use the d-md-none class (adjust as needed, e.g., d-sm-none, d-lg-none, etc.).

Note also that images can be added programmatically using the following jQuery script:

$(function() {
  $('.card-tall').each(function() {
    $(this).append($('<img />', {
      class: 'd-inline-block w-100 h-auto invisible',
      src: $(this).css('backgroundImage').replace('url("', '').replace('")', '')
    }))
  })
})

See it in action:

$(function() {
  $('.card-tall').each(function() {
    $(this).append($('<img />', {
      class: 'd-inline-block w-100 h-auto invisible',
      src: $(this).css('backgroundImage').replace('url("', '').replace('")', '')
    }))
  })
})

.card-tall {
  background-size: contain;
  background-repeat: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b10170c07101256181b2a38050911120e">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="card card-tall" style="background-image:url(https://picsum.photos/200/200)"></div>
    </div>
    <div class="col-sm-4">
      <div class="card card-tall" style="background-image:url(https://picsum.photos/200/300)"></div>
    </div>
    <div class="col-sm-4">
      <div class="card card-tall" style="background-image:url(https://picsum.photos/300/200)"></div>
    </div>
  </div>
</div>

Add the d-md-none class to limit the <img> display behavior to small screens (sm and below).

Creating a responsive bootstrap card-tall for mobile devices

Answer №1

Similar questions

Switching the favicon to utilize the favicon.ico file

Swapping out DIVs with jQuery

What is the best method for arranging checkboxes in a vertical line alongside a list of items for uniform alignment?

How come my counter is still at 0 even though I incremented it within the loop?

Animation will cease once the page is refreshed via Ajax

Mistake made by the author while using the Google Structured Data Test

Refreshing a div using ajax technology

Personalized design for the range input in React

Alter the color of H3 when clicked and then gently fade it back

Implementing a redirection of Dojo Data grid cell values to a different destination

Reviewing code for a simple form and box using HTML5 and CSS3

When Socket.emit is called, it outputs <span> elements within a well-structured message

Determine in Jquery if all the elements in array 2 are being utilized by array 1

use ajax to dynamically append a dropdown menu

Retrieve input value in Angular 8 using only the element's ID

Design a big-sized button using Bootstrap framework

Enhanced Interactivity: jQuery UI Dialog Button Transforms Position upon Mouse Hover

The console correctly detects the value, but is unable to set the innerHTML property of null

Steps for making a toggle button with Bootstrap

Trouble with CSS display in Internet Explorer 8