I am currently trying to complete a challenge where I have encountered this issue-
I have selected certain rows and columns of the grid, but my subtitle-img class is still overlapping subtitle2 class.
Can anyone find the possible reason and solution to this problem?
My code:
body{
background: #DCE8FF;
font-family: 'Times New Roman', Times, serif;
animation: fadein 2s ease-in 0s 1 normal forwards;
}
.main-container{
display: grid;
grid-template-columns: 65% 30%;
column-gap: 5%;
}
.subtitle-content-grid{
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto auto;
}
.subtitle1{
grid-column-start: 1;
grid-column-end: span col2-end;
grid-row-start: 1;
grid-row-end: span 1;
}
.subtitle2{
grid-column-start: 1;
grid-column-end: span col2-start;
grid-row-start: 2;
grid-row-end: span 2;
}
.subtitle-img{
display: -ms-flexbox;
display: flex;
height: auto;
grid-column-start: 3;
grid-column-end: span col3-end;
grid-row-start: 2;
grid-row-end: span 4;
}
.sub-img{
display: -ms-flexbox;
display: flex;
justify-content: center;
flex: 100%;
max-width: 100%;
height: auto;
}
.image-gallery{
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
flex: 50%;
max-width: 60%;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (min-width: 400px) and (max-width: 1000px) {
.image-gallery {
flex: 100%;
max-width: 100%;
}
}
.image{
margin-top: 8px;
vertical-align: baseline;
width: 46%;
padding: 5px 10px 5px 5px;
}
.sidebar-content{
background: #FFE3BF;
}
.post{
border: 2px solid #FBCA8B;
margin: 5px;
}
.post>h2,p,a{
padding-left: 4px;
}
.post>a:hover{
animation: colorChange 2s ease-out 0s infinite normal;
}
.footer{
background: linear-gradient(#DCE8FF,steelblue);
height: 550px;
}
.contact-form{
margin: 10% 10% 10% 10%;padding: 2% 0 0 0;
animation: slidein 2s ease-in 0s 1 normal forwards;
}
input[type=text], textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type=submit] {
background-color: rgb(39, 132, 247);
color: white;
font-weight: bold;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: rgb(25, 25, 157);
}
/*Animations*/
@keyframes colorChange{
0%{
color: rgba(0, 145, 255, 0.943);
}
50%{
color: rgb(74, 74, 233);
}
100%{
color: steelblue;
}
}
@keyframes fadein{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes slidein {
0%{
-webkit-transform:translateX(-100%);
-moz-transform:translateX(-100%);
-o-transform:translateX(-100%);
-ms-transform:translateX(-100%);
}
100%{
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-o-transform:translateX(0);
-ms-transform:translateX(0);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="wsc.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Styling Challenge</title>
</head>
<body>
<div class="main-container">
<div class="main-content">
<h1>Welcome to this Challenge</h1>
<p>Here is your list of objectives:</p>
<ul>
<li>Lay out the Content & Sidebar</li>
<li>Create proper margin & spacing around items</li>
<li>Import & Use A Custom Font</li>
<li>Color Scheme: Blue & Orange (Use However you see fit)</li>
<li>Style text appropriately</li>
<li>change the background color of the sidebar</li>
<li>Style image grid however you see fit</li>
<li>Create borders around each sidebar items</li>
<li>Create grid/flexbox for image and text under "Subtitle"</li>
<li>Image grow on hover</li>
<li>Link color change on hover</li>
<li>Page animation sequence for main items (content, sidebar)</li>
</ul>
<p>Do not feel limited by the objective! change or append anything you like. Good Luck!</p>
<div class="subtitle-area">
<div class="subtitle-content-grid">
<div class="subtitle1">
<h2 class="subtitle">Subtitle 1</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, debitis odit. Omnis esse ea aut nisi eos ab, ipsa qui labore sed facilis, quos perspiciatis voluptates aliquid fugiat exercitationem impedit!</p>
</div>
<div class="subtitle2">
<h2 class="subtitle">Subtitle 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni, quam fugit perspiciatis maiores molestias quo totam, saepe obcaecati quia, nulla itaque perferendis culpa suscipit reiciendis reprehenderit! Illum, sapiente earum!</p>
</div>
<div class="subtitle3">
<h2 class="subtitle">Topic 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, officiis. Illum odio quos, magni quam illo modi rerum maxime et minus dolore autem, nihil veniam. Architecto aspernatur temporibus ipsam dolorem.</p>
<ol>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>amet consectetur adipisicing elit!</li>
</ol>
</div>
<div class="subtitle-img">
<img class="sub-img" src="https://picsum.photos/300/300">
</div>
</div>
</div>
<div class="image-gallery">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
</div>
</div>
<div class="sidebar-content">
<div class="post">
<h2>Post 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="">Lorem ipsum dolor sit amet</a>
</div>
<div class="post">
<h2>Post 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="">Lorem ipsum dolor sit amet</a>
</div>
<div class="post">
<h2>Post 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="">Lorem ipsum dolor sit amet</a>
</div>
<div class="post">
<h2>Post 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="">Lorem ipsum dolor sit amet</a>
</div>
<div class="post">
<h2>Post 5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="">Lorem ipsum dolor sit amet</a>
</div>
<div class="post">
<h2>Post 6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="">Lorem ipsum dolor sit amet</a>
</div>
</div>
</div>
<div class="footer">
<div class="contact-form">
<form action="/action_page.php">
<label >First name:</label><br>
<input type="text" id="fname" placeholder="Your First Name"><br>
<label >Last name:</label><br>
<input type="text" id="lname" placeholder="Your Last Name"><br><br>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>Try using this in .subtitle-img
grid-column-start: 3;
grid-column-end: span 3;
grid-row-start: 2;
grid-row-end: span 4;