CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Ten Digit Grid
Ten Digit Grid

Reputation: 2629

Responsive Gallery not working. How can I make the cards responsive?

I have been following this W3 tutorial to create a gallery view. The issue is that it looks horrible on a mobile device. It keeps three cards to each row and makes them super tiny...

I looked at the bootstrap documentation on containers and saw this class name that I tried:

class="container-md"

But that did not make them responsive, in the way I wanted. It still kept them three to a row.

I then tried removing this CSS:

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide all elements by default */
}

But that made just one big one per row... and looks to have broke the sorting buttons as well...

If you want to see my full code and CSS, you can check it out here: https://www.seekadventure.net/GearLocker.html

Upvotes: 0

Views: 64

Answers (1)

Gellio Gao
Gellio Gao

Reputation: 843

Try to add classes row row-cols-1 row-cols-sm-2 row-cols-md-3 to the row element where has the class row to make the row responsive. Check out the document for the detail.

Upvotes: 1

Related Questions