Here are the code snippets. Everything seems fine here, but in my browser, the last image overflows on the blue section and the text below it is not visible at all. This issue occurs with the third list item of the unordered list.
/****************
Custom CSS Styles
****************/
body {
margin: 0;
text-align: center;
}
img {
display: block;
width: 100%;
height: auto;
}
h1, h2 {
margin: 0;
padding: 10px 0;
}
p {
margin: 0;
padding: 10px 10px;
}
li {
list-style: none;
}
.btn {
background-color: #e3e3e3;
text-decoration: none;
padding: 3px 5px;
border 1px solid black;
}
/*****************
SHOWCASE STYLES
*****************/
#showcase {
min-height: 400px;
color: white;
}<!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">
<link rel="stylesheet" href="reset.css" type="text/css">
<link rel="stylesheet" href="responsivegrif.css" type="text/css">
<title>Responsive Grid Layout</title>
</head>
<body>
<div id="showcase" class="grid">
<div class="image">
<div class="backimage"></div>
</div>
<div class="showcasecontent">
<div class="welcome">
<h1>Welcome To My Responsive Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem pariatur, esse accusamus quis magni eveniet est veritatis asperiores temporibus iusto laborum illo eos doloremque dolorum corporis aut in nostrum sapiente.</p>
<a class="btn" href="#">Read more</a>
</div>
</div>
</div>
Hey everyone, I'm currently working on a responsive page using CSS grid. However, one of the images is overflowing beyond its container. I have applied the grid class to this section, but the last image within the list item is still causing overflow.
<div class="section-b grid">
<ul>
<li>
<div class="li">
<img src="item-1-image.jpeg" alt="">
</div>
<div class="licontent">
<h2>Section B Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloribus, magni vitae odio doloremque facilis laborum cupiditate ut tempore quaerat.</p>
</div>
</li>
<li>
<div class="li">
<img src="item-2-image.jpeg" alt="">
</div>
<div class="licontent">
<h2>Section B Item 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, aliquid. Tempora voluptas necessitatibus aut repudiandae eum incidunt adipisci animi laudantium.</p>
</div>
</li>
<li>
<div class="li">
<img src="item-3-image.jpeg" alt="">
</div>
<div class="licontent">
<h2>Section B Item 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse ratione odio nulla, iste error impedit itaque. Saepe unde, consectetur impedit.</p>
</div>
</li>
</ul>
Additional CSS:
@media (min-width:700px) {.grid {display: grid;}}