I'm new to HTML, CSS and I have been struggling to make this responsible grid with images. When you hover above them, text appears, but that's working fine. The problem is that once I resize the size of the screen, the grid stays the same and doesn't scale down to fit in. Also, once the screen width is less than 900px, the images go bananas.
Thank you in advance for tips!
#grid {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 0.2fr;
grid-gap: 10px;
}
.contain {
position: relative;
margin: 0;
width: 100%;
height: 100%;
}
#grid img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.description {
position: absolute;
top: 0;
left: 0;
bottom: 0;
padding: 1rem;
text-align: left;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
opacity: 0;
transition: opacity 0.4s, visibility 0.4s;
}
.contain:hover .description {
visibility: visible;
opacity: 1;
}
#grid > div:nth-child(1) {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
#grid > div:nth-child(2) {
grid-column: 2 / 4;
grid-row: 1 / 2;
}
#grid > div:nth-child(3) {
grid-column: 4 / 5;
grid-row: 1 / 2;
}
#grid > div:nth-child(4) {
grid-column: 1 / 3;
grid-row: 2 / 3;
}
#grid > div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
#grid > div:nth-child(6) {
grid-column: 3 / 4;
grid-row: 2 / 4;
}
#grid > div:nth-child(7) {
grid-column: 4 / 5;
grid-row: 2 / 3;
}
#grid > div:nth-child(8) {
grid-column: 4 / 5;
grid-row: 3 / 4;
}
@media (max-width: 900px) {
#grid {
grid-template-columns: repeat(2, 1fr);
}
#grid div:nth-child(1) {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
#grid div:nth-child(2) {
grid-column: 2 / 4;
grid-row: 1 / 2;
}
#grid div:nth-child(3) {
grid-column: 3 / 4;
grid-row: 2 / 4;
}
#grid div:nth-child(4) {
grid-column: 1 / 3;
grid-row: 2 / 3;
}
#grid div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
#grid div:nth-child(6) {
grid-column: 1 / 2;
grid-row: 4 / 6;
}
#grid div:nth-child(7) {
grid-column: 2 / 4;
grid-row: 4 / 5;
}
#grid div:nth-child(8) {
grid-column: 2 / 4;
grid-row: 5 / 6;
}
}<div id="grid">
<div class="contain">
<img src="media/perspective.jpg">
<p class="description">Every element of an image influences how your audience feels about your subject. This includes using angles to establish different moods. Just by changing your camera position, you can affect how people perceive your photo.</p>
</div>
<div class="contain">
<img src="media/thirds.jpg">
<p class="description">The rule of thirds is based on the idea that pictures are generally more interesting and well balanced when they aren’t centred. Imagine a grid placed over your images with two vertical lines and two horizontal lines that divide the picture into nine equal sections.</p>
</div>
<div class="contain">
<img src="media/eyes.jpg">
<p class="description">When shooting portraits, you’ll be focusing on a very small area so it will be more important than ever that you get a nice sharp image. The eyes in particular are an important facial feature, and they’re often the first thing people look at, especially when it comes to close-ups and headshots.</p>
</div>
<div class="contain">
<img src="media/background.jpg">
<p class="description">Generally speaking, the background should be as simple and clutter free as possible so that it doesn’t pull the viewer’s attention away from the main subject of the photo. Muted colours and plain patterns tend to work well, because you don’t want viewers to end up being more interested in the colourful building or church tower in the background than your model.</p>
</div>
<div class="contain">
<img src="media/selective.jpg">
<p class="description">It’s important to realise that every photographer, no matter how experienced or talented, gets some mediocre shots. The reason that their portfolios are so impressive, however, is that they only display their best work; they don’t bore you with ten photos of a nearly identical scene.</p>
</div>
<div class="contain">
<img src="media/sunset.jpg">
<p class="description">Lighting can make or break a photo, and the early morning and evening are widely thought to be the best times of day for taking photos. In photography, the hour just after the sun rises or before it sets is called the “golden hour,” because the sun is lower in the sky and the light is softer and warmer.</p>
</div>
<div class="contain">
<img src="media/raw.jpg">
<p class="description">RAW is a file format like jpeg, but unlike jpeg, it captures all the image data recorded by your camera’s sensor rather than compressing it. When you shoot in RAW you’ll not only get higher quality images but you’ll also have far more control in post processing. For instance, you’ll be able to correct problems such as over or underexposure and adjust things like colour temperature, white balance and contrast.</p>
</div>
<div class="contain">
<img src="media/flash.jpg">
<p class="description">If you’re not careful, using your camera’s built-in flash at night or in low light can lead to some unpleasant effects like red eyes and harsh shadows. In general, it’s better to crank up the ISO and get noisier photos than to use the on-camera flash and risk ruining the shot altogether.</p>
</div>
</div>Here are the changes you can try:
You can remove the media query and nth-child stuff and it will work fine.
#grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 0.2fr;
grid-gap: 10px;
}