Grid Layout Not functioning responsively
I'm completely lost on how to make this fit in my at all times
I've tried setting a min and max height but i don't think i understand them well enough so i couldn't get it to work
i've tried changin the main message container to 90% and still doesn't look the part
main-message-containermain-message-containerI've tried setting a min and max height but i don't think i understand them well enough so i couldn't get it to work
i've tried changin the main message container to 90% and still doesn't look the part
<div class="main-message-container">
<div class="message-container">
<div class="image-1">
</div>
<div class="text">
<h2>
Gaming Peripherals
</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi a earum voluptas, error mollitia odit culpa quos eum! Provident, dolorem cum nulla voluptatibus necessitatibus fugit corrupti? Autem neque modi facere?
</div>
<div class="text">
<h2>
Gaming Peripherals
</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi a earum voluptas, error mollitia odit culpa quos eum! Provident, dolorem cum nulla voluptatibus necessitatibus fugit corrupti? Autem neque modi facere?
</div>
<div class="image-2">
</div>
</div>
</div> <div class="main-message-container">
<div class="message-container">
<div class="image-1">
</div>
<div class="text">
<h2>
Gaming Peripherals
</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi a earum voluptas, error mollitia odit culpa quos eum! Provident, dolorem cum nulla voluptatibus necessitatibus fugit corrupti? Autem neque modi facere?
</div>
<div class="text">
<h2>
Gaming Peripherals
</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi a earum voluptas, error mollitia odit culpa quos eum! Provident, dolorem cum nulla voluptatibus necessitatibus fugit corrupti? Autem neque modi facere?
</div>
<div class="image-2">
</div>
</div>
</div>.main-message-container{
height: 90vh;
background-color: red;
display: flex;
align-items: center;
background: url(../assets/message-texture.jpg);
background-size: cover;
}
.message-container{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
height: 80%;
width: 80vw;
margin-inline: auto;
}
.image-1{
background: url(../assets/message2.jpg);
}
.image-2{
background: url(../assets/message1.webp);
}
.image-1, .image-2{
background-size: cover;
}
.text{
background-color: black;
color: white;
justify-content: left;
padding: 50px;
font-size: 1rem;
}
.text>h2{
color: red;
}.main-message-container{
height: 90vh;
background-color: red;
display: flex;
align-items: center;
background: url(../assets/message-texture.jpg);
background-size: cover;
}
.message-container{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
height: 80%;
width: 80vw;
margin-inline: auto;
}
.image-1{
background: url(../assets/message2.jpg);
}
.image-2{
background: url(../assets/message1.webp);
}
.image-1, .image-2{
background-size: cover;
}
.text{
background-color: black;
color: white;
justify-content: left;
padding: 50px;
font-size: 1rem;
}
.text>h2{
color: red;
}
