KPC
Kevin Powell - CommunityNeedForSleepx30

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;
}
No description
N
NeedForSleepx30•15d ago
No description
C
clevermissfox•15d 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 Picsum
Lorem Ipsum... but for photos
N
NeedForSleepx30•15d ago
M
MarkBoots•15d 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
N
NeedForSleepx30•15d 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!
Want results from more Discord servers?
Add your server
More Posts
html input behaviouri've been wondering about this for awhile. when your text input starts running out of room the rightget value of sibling aboveHey, if i have a structure like so: ```html <p class="a">...</p> <p class="b">...</p> ``` ```css .a Error I dont understandHI everyone somebody can explain me what is going wrong hereSearch bar jsHow do i get results from my search barCan't figure out how to wrap text under an imageBasically, what I want to achieve is this (1st image): https://prnt.sc/EO_CIn76U9UT The closest I cHow to add stuff off of my sidebarI want to add stuff on the right side of my website but it isnt showing upUsing escaped unicode in contentIs it possible to use escaped unicode in content to get emoji combinations like Phoenix for example,Github blocked push due to secretsIt was right, my `rest.http` file was misspelt in my `gitignore`. But now it's correct and git is Trying to get the cards over each other properlyI want to set the back-card under the front-card with wider and shorter than the front-card, but couOverflow Issuehttps://w5bkz10l-3000.inc1.devtunnels.ms/ I'm trying to find which section is overflowing, tried inpUsing Vite with SCSSSo i was advised to try scss with vite instead of just using node as i was getting errors. What i dAbsolute position with gridI need help to position a text and image inside a grid item which size its 2fr but trying to positiSVGs <use> and not...Hi guys I really would aprecciate come help here. In this HMTL are two ways of using svgs but one ofHandling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?GH:https://github.com/nnall/hm-frontend-Nick.git I have an element in my react return, several real