Reputation: 7
I'm a beginner and I've tried researching for a day or two now and I'm completely stuck.
I'm watching tutorials while I learn by myself and I can't seem to figure out how to make this responsive. Basically I want it to be a width:100%; on the css but still maintain that square cover thumbnail style. (take the full width of the browser/phone for smaller screens like instagram) Any help or if you could point me to the right direction would be greatly appreciated! Thanks
<style>
.gallery {
display: flex;
flex-direction: column;
align-items: center;
}
.photo img {
padding: 20 0px;
object-fit: cover;
/* pls ignore these 2 lines of code below
I want it to take the full width of the
browser/phone for smaller screens */
width: 250px;
height: 250px;
}
</style>
<div class="gallery">
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/11/29/13/34/dog-4661341__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/08/20/13/14/panda-4418773__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/02/18/44/coffee-beans-4668463__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/04/13/12/hair-4672683__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/04/09/30/brutal-4672229__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2015/05/31/11/18/table-791149__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/02/03/26/snow-4666831__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/11/23/07/24/christmas-4646421__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/11/25/09/00/exotic-4651348__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/10/10/22/15/norway-4540666__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/09/16/17/18/spa-4481538__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2018/03/29/11/59/snow-3272072__340.jpg"><a href="#"></a></div>
</div>
Upvotes: 0
Views: 648
Reputation: 393
You should take a single row and then multiple columns into it and also you should use media query for responsiveness. I have put different CSS for different browsers. I have tried to code as per your requirement, which is as follows. Kindly refer to the same.
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
</style>
<body>
<div class="row">
<div class="column">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/falls2.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
</div>
</div>
</body>
</html>
Upvotes: 0
Reputation: 161
change your css file to:
.gallery {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
It makes the content in the middle of the page and wrap your content when you make the page smaller.
Upvotes: 1
Reputation: 2165
Add the following css to your gallery class and it will evenly distribute your images evenly throughout the screen.
.gallery {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-evenly;
}
Demo:
.gallery {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-evenly;
}
.photo img {
padding: 20 0px;
width: 150px;
height: 150px;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bougrine Shop - Home</title>
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendors/nice-select/nice-select.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="./text.css">
<link rel="stylesheet" href="css/Css_acceuil_marjane.css">
</head>
<body>
<div class="gallery">
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/11/29/13/34/dog-4661341__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/08/20/13/14/panda-4418773__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/02/18/44/coffee-beans-4668463__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/04/13/12/hair-4672683__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/04/09/30/brutal-4672229__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2015/05/31/11/18/table-791149__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/02/03/26/snow-4666831__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/11/23/07/24/christmas-4646421__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/11/25/09/00/exotic-4651348__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/10/10/22/15/norway-4540666__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2019/09/16/17/18/spa-4481538__340.jpg"><a href="#"></a></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2018/03/29/11/59/snow-3272072__340.jpg"><a href="#"></a></div>
</div>
</body>
</html>
Upvotes: 0
Reputation: 5556
You just need to update your CSS of .gallery
to
.gallery {
display: flex;
align-items: center;
flex-wrap: wrap;
}
You can check out live working example here https://jsfiddle.net/7jdyev4a/1/
Upvotes: 1