:root {
--text-color:#fff;
}
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
body {
margin: 10px;
background: #ddd;
font-family: 'Noto Serif', serif;
}
.container {
margin: 0 auto;
width: 100%;
height: 100%;
background: goldenrod;
display: grid;
grid-template-columns: 3fr 1fr;
grid-gap: 10px;
}
.rightcontainer {
background: blue;
padding: 25px;
}
.rightcontainer .links {
margin-bottom: 10px;
font-size: 1.2em;
}
.links a {
text-decoration: none;
color: var(--text-color);
}
.leftcontainer {
background: green;
display: grid;
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
}
.leftcontainer__feature-articles {
background: yellow;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.leftcontainer__feature-article1 {
background: #000;
color: #fff;
}
.leftcontainer__feature-article2 {
background: #555;
color: #fff;
}
.leftcontainer__recent-articles {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.leftcontainer__recent-articles > div{
padding: 5px;
background: #ccc;
display: grid;
grid-template-columns: 150px 1fr;
}
.leftcontainer__recent-articles > div img {
width: 100%;
height: 100%;
object-fit: cover;
}
.recent-contentholder {
padding: 10px;
}
.recent-time-added {
display: inline-block;
font-style: italic;
margin-bottom: 5px;
}
.leftcontainer__feature-articles > div {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.leftcontainer__feature-article1 img,
.leftcontainer__feature-article2 img {
width: 100%;
object-fit: cover;
height: 100%;
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.leftcontainer__feature-article1 div,
.leftcontainer__feature-article2 div {
width: 100%;
height: 100%;
grid-column: 1 / -1;
grid-row: 1 / -1;
}<!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>NewBlog</title>
<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,700|Roboto:100,300,400,500,700,900" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="leftcontainer">
<div class="leftcontainer__feature-articles">
<div class="leftcontainer__feature-article1">
<img src="//source.unsplash.com/random/500x500?v=1" alt="">
<div class="feature-contentholder">
<h2 class="feature-title">Title1</h2>
<small class="feature-time-added">
Tuesday 30 23:58
</small>
<p class="feature-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
non!
</p>
</div>
</div>
<div class="leftcontainer__feature-article2">
<img src="//source.unsplash.com/random/500x500?v=1" alt="">
<div class="feature-contentholder">
<h2 class="feature-title">Title1</h2>
<small class="feature-time-added">
Tuesday 30 23:58
</small>
<p class="feature-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
non!
</p>
</div>
</div>
</div>
<div class="leftcontainer__recent-articles">
<div class="leftcontainer__recent-article1">
<img src="//source.unsplash.com/random/300x300?v=1" alt="">
<div class="recent-contentholder">
<h2 class="recent-title">Title1</h2>
<small class="recent-time-added">
Tuesday 30 23:58
</small>
<p class="recent-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
non!
</p>
</div>
</div>
<div class="leftcontainer__recent-article2">
<img src="//source.unsplash.com/random/300x300?v=2" alt="">
<div class="recent-contentholder">
<h2 class="recent-title">Title2</h2>
<small class="recent-time-added">
Tuesday 30 23:58
</small>
<p class="recent-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
non!
</p>
</div>
</div>
<div class="leftcontainer__recent-article3">
<img src="//source.unsplash.com/random/300x300?v=3" alt="">
<div class="recent-contentholder">
<h2 class="recent-title">Title3</h2>
<small class="recent-time-added">
Tuesday 30 23:58
</small>
<p class="recent-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
non!
</p>
</div>
</div>
<div class="leftcontainer__recent-article4">
<img src="//source.unsplash.com/random/300x300?v=4" alt="">
<div class="recent-contentholder">
<h2 class="recent-title">Title4</h2>
<small class="recent-time-added">
Tuesday 30 23:58
</small>
<p class="recent-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
non!
</p>
</div>
</div>
</div>
</div>
<div class="rightcontainer">
<div class="links">
<a href="#">first post</a>
</div>
<div class="links">
<a href="#">second post</a>
</div>
<div class="links">
<a href="#">third post</a>
</div>
<div class="links">
<a href="#">fourth post</a>
</div>
</div>
</div>
</body>
</html>img tags inside leftcontainer__feature-article1 and leftcontainer__feature-article2 on chrome sit inside parent taking full width and height as expected, but on firefox im facing issue.
I tried adding max-width and max-height to parent and img then it'll work on firefox and itll fail to work on chrome.
I'm trying to do this since forever I'm unable to figure out what's wrong. I want to know where I'm wrong.
