how to make a gallery responsive

Question

how to make a gallery responsive

Navigation

#1 by (0 votes)

0

I would like it to be responsive, to be on a smaller screen the images will be one below the other. THANK YOU

* {
  padding: 0;
  margin: 0;
  font-family: Helvetica;
  font-weight: 100;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
  
  user-select: none;
}

.card-cover {
  position: relative;
  height: 500px;
  cursor: pointer;
}
.card-cover__background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: -1;
  transition: all .3s ease-in-out;
}
.card-cover__body {
  display: grid;
  align-content: center;
  align-items: center;
  text-align: center;
  color: #FFF;
  position: relative;
  background-color: rgba(0, 0, 0, 0.45);
  width: 100%;
  height: 100%;
  transition: background-color 0.5s ease;
  overflow: hidden;
}
.card-cover__body:hover {
  background-color: transparent;
  color: rgba(253, 252, 249, 0.904);
}
.card-cover__body:hover > img {
  transform: scale(1.3);
}

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>1234</title>



	<link rel="stylesheet" href="css/style.css">


</head>

<body>

	<div class="cards container-fluid">
		<div class="card-cover">
			<div class="card-cover__body ">
				<img class="card-cover__background" src="https://static.iris.net.co/semana/upload/images/2017/10/3/542721_1.jpg" alt="">
				<h2>
					Hola mundo
				</h2>
				<p>
					Lorem ipsum dolor sit, amet consectetur adipisicing elit.
				</p>
			</div>
		</div>
		<div class="card-cover">
			<div class="card-cover__body">
				<img class="card-cover__background" src="https://source.unsplash.com/random/810x700" alt="">
				<h2>
					Hola mundo
				</h2>
				<p>
					Lorem ipsum dolor sit, amet consectetur adipisicing elit.
				</p>
			</div>
		</div>
		<div class="card-cover">
			<div class="card-cover__body">
				<img class="card-cover__background" src="https://source.unsplash.com/random/700x700" alt="">
				<h2>
					Hola mundo
				</h2>
				<p>
					Lorem ipsum dolor sit, amet consectetur adipisicing elit.
				</p>
			</div>
		</div>
		<div class="card-cover">
			<div class="card-cover__body">
				<img class="card-cover__background" src="https://source.unsplash.com/random/500x700" alt="">
				<h2>
					Hola mundo
				</h2>
				<p>
					Lorem ipsum dolor sit, amet consectetur adipisicing elit.
				</p>
			</div>
		</div>
	</div>



</body>

</html>

html css responsive grid

asked by Dario Perez 09.10.2018 в 01:01

source

1 answer

Reading of text file lines with pauses every 25 lines Create menu and difficulty in pygame

score 0 · Accepted Answer

As in this case you are using CSS Grid, to get what you want you would have to use Media Queries.

With this line of code you are telling css that you want it to have several columns:

grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));

If you want the images to be one below the other on small screens, then on a half querie you specify that you only want a single column. That will make them put one under another. grid-template-column: 1fr within a half querie can help. Ex:

@media (max-width: 500px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

Putting that at the end of your code should work. Of course there are other ways, but I hope you have understood with this example. Greetings!