Grid Layout Not functioning responsively

I'm completely lost on how to make this fit in my

main-message-container

main-message-container

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

 <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;
}

5 Replies

NeedForSleepx30OP•9mo ago

clevermissfox•9mo ago

friendly reminder, its more likely one of the coding geniuses that float around here will be inclined to help if you post the relevant code into a https://codepen.io . you can use placeholder images from something like https://unsplash.com or https://picsum.photos

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

Beautiful Free Images & Pictures | Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

Lorem Picsum

Lorem Ipsum... but for photos

NeedForSleepx30OP•9mo ago

ahh i see will do https://codepen.io/jotaro-kujo-the-builder/pen/abxxdpa

MarkBoots•9mo ago

you are trying to fit everything in 90vh. but if the screen gets more narrow, the text will wrap and forces the height to grow. Because you have set a fixed height on the container (90vh) it has no room for it and will overflow. So, remove the height or make it a min-height so it is able to grow along with the content

NeedForSleepx30OP•9mo ago

ohhh yep that does seem to work, doing that does break the rest of my layout because i've made a complete mess but that helps me with the grid layout thank you for your help!

Gaming

Programming

Grid Layout Not functioning responsively

Did you find this page helpful?