Why is the codearea and console section collapsing and how do I prevent it when using media query at 1167px,Can someone please help me out

Whenever the windowsize is less than 1167px the right section using media query(code area and console section is collapsing)I want it to maintain same ratio of 55%(codearea) and 45%(console) .Can Someone please look into it.

HTML:

<title>Document</title>

Playground

Run share Clear Reset
HTML
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur eveniet quibusdam beatae omnis! Omnis deserunt aliquid fugiat voluptates earum eum rerum officiis dolorem. Minus, ipsa animi tenetur ducimus iusto quidem! Culpa sunt aut assumenda eum, minus tenetur impedit a error voluptate laudantium suscipit voluptatibus minima dignissimos ducimus perspiciatis recusandae officia. Illum, ipsam quisquam fuga sapiente laboriosam deserunt minima consequuntur maxime? Sed autem illo quis voluptatum quisquam vero ut quia sequi maxime beatae, perferendis, aut enim dolore quaerat totam nostrum? Quos perferendis perspiciatis velit animi ex, aliquid iure quasi numquam deleniti! Dignissimos optio animi ipsum hic nihil cumque blanditiis quia, incidunt mollitia harum earum possimus sit necessitatibus quam ipsa, voluptatem inventore voluptas tenetur qui consequuntur id nulla! Repudiandae esse nemo veniam.
CSS
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur eveniet quibusdam beatae omnis! Omnis deserunt aliquid fugiat voluptates earum eum rerum officiis dolorem. Minus, ipsa animi tenetur ducimus iusto quidem! Culpa sunt aut assumenda eum, minus tenetur impedit a error voluptate laudantium suscipit voluptatibus minima dignissimos ducimus perspiciatis recusandae officia. Illum, ipsam quisquam fuga sapiente laboriosam deserunt minima consequuntur maxime? Sed autem illo quis voluptatum quisquam vero ut quia sequi maxime beatae, perferendis, aut enim dolore quaerat totam nostrum? Quos perferendis perspiciatis velit animi ex, aliquid iure quasi numquam deleniti! Dignissimos optio animi ipsum hic nihil cumque blanditiis quia, incidunt mollitia harum earum possimus sit necessitatibus quam ipsa, voluptatem inventore voluptas tenetur qui consequuntur id nulla! Repudiandae esse nemo veniam.
Javascript
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur eveniet quibusdam beatae omnis! Omnis deserunt aliquid fugiat voluptates earum eum rerum officiis dolorem. Minus, ipsa animi tenetur ducimus iusto quidem! Culpa sunt aut assumenda eum, minus tenetur impedit a error voluptate laudantium suscipit voluptatibus minima dignissimos ducimus perspiciatis recusandae officia. Illum, ipsam quisquam fuga sapiente laboriosam deserunt minima consequuntur maxime? Sed autem illo quis voluptatum quisquam vero ut quia sequi maxime beatae, perferendis, aut enim dolore quaerat totam nostrum? Quos perferendis perspiciatis velit animi ex, aliquid iure quasi numquam deleniti! Dignissimos optio animi ipsum hic nihil cumque blanditiis quia, incidunt mollitia harum earum possimus sit necessitatibus quam ipsa, voluptatem inventore voluptas tenetur qui consequuntur id nulla! Repudiandae esse nemo veniam.
Codearea
Console

CSS

body{
background-color: #607D8B;
display: flex;
justify-content: center;
align-items: center;
font-family:“Open Sans”, sans-serif;

}
.wrapper{
display: grid;
grid-template-columns: repeat(2,1fr);
width: 100%;
max-width: 90%;
gap: 10px;
padding: 5px 7px;
box-shadow: 5px 5px 5px rgb(174, 182, 230);
box-sizing: border-box;
}
.left{
background-color: #78909C;
display:flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.left .navbar{
display: flex;
background-color: rgb(43, 40, 40);
width: 100%;
color: white;
padding: 10px 15px;
box-sizing: border-box;
align-items: center;
justify-content: center;

}
.navbar p{
margin: 0;
font-size: 22px;
font-weight: bold;
letter-spacing: 2px;
border-radius: 2px;
}
.left .navbar .rightlinks{
display: flex;
gap: 9px;
margin-left: auto;
}
.rightlinks button{
color: goldenrod;
background-color: rgb(33, 36, 40);
border: 1px solid black;
border-radius: 10px;
padding: 7px 11px;
text-transform: uppercase;
cursor: pointer;
}
.left .html{
background-color: #455A64;
width: 98%;
height: 50%;
border-radius: 4px;
overflow: auto;
}
.left .html .heading{
width: 100%;
background-color:#2c3d45;
color: goldenrod;
font-size: 18px;
font-weight: bold;
padding: 12px 0px 12px 3px;
border-radius: 4px;
box-sizing: border-box;
}
.left .html .area{
overflow: hidden;
overflow-y: scroll;
box-sizing: border-box;
}
.right{
background-color:#2f444f;
display: flex;
flex-direction: column;
align-items: center;
min-height: 90%;
}
.codearea{
background-color: rgb(158, 165, 165);
width: 98%;
height: 55%;
}
.right .heading{
width: 100%;
background-color:#2c3d45;
color: goldenrod;
font-size: 18px;
font-weight: bold;
padding: 12px 0px 12px 3px;
border-radius: 4px;
box-sizing: border-box;
}
.console{
background-color: rgb(16, 16, 16);
width: 98%;
height: 45%;
}
.console div{
color: white;
text-align: center;
width: 98%;
}
@media only screen and (max-width:1167px){
.wrapper{
display: grid;
grid-template-columns: 1fr;
}

}

Could you share your code on codepen.io?

Or make your code preformatted by using the Preformatted Text

Or put your code between ``` and ``` (three backticks) to make it preformatted.

Hey there,

Please update the message to include your code. The code is not formatted correctly making it impossible to read.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Hey Toan ,Thank you for the reply.I’m new to the community so I didn’t know about the rules to post
Here is the codepen link: https://codepen.io/Gautham-Nemuturi/pen/qBGXjPp

And a follow up question to my previous post is The scroll in the playground section is not working as expected could you please look into that as well.

This is your HTML structure:

.wrapper
    .left
        (long text)
    .right
        .codearea
        .console

And you use grid to layout:

.wrapper{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    height: auto;
}

@media only screen and (max-width:1167px){
    .wrapper{
        grid-template-columns: 1fr;
    }
}

You set

.wrapper {
    height: auto;
}

which mean .wrapper’s height is automatically adjusted based on its content’s height.


In the default layout, .left and .right are 2 columns side-by-side.
.left has a long text inside it
.right has 2 empty div with no content inside it
So, implicitly, .right height will be automatically calculated as the same height as .left.


In the media query, the layout changed, .left and .right are now stacking on each other.
And because of:

  • .right has 2 empty div with no content inside it
  • .wrapper’s height is based on its content’s height

So .right is collapsed.


To prevent .right collapsing, you can set fixed height for .codearea and .console in the media query, with the 55/45 ratio as you wished.

@media only screen and (max-width:1167px){
    .codearea {
        height: 550px;
    }

    .console {
        height: 450px;
    }
}
1 Like

Because .wrapper’s height is automatically adjusted based on its content’s height, so .wrapper will go as high as its content, therefore there will be no scrollbars on .left .html divs.

Try to set fixed height for .wraper, something like:

.wrapper {
    height: 100vh;
}

Put a longer content inside .html divs, or set smaller height for them

.html {
    height: 20%;
}

and you will see scrollbars.

1 Like

Thank You so much Toan. Will make the necessary changes