How to properly use media query to achieve this result? - css

Question

I want to build a responsive webpage using Angular 6.I tried to do so using bootstrap but failed miserably.So ultimately I decided to go with media query.
This is my code:
.width {
width: 300px;
height: 300px;
display: inline-block;
border: 1px solid blue;
}
.width1 {
width: 800px;
height: 300px;
border: 1px solid blue;
display: inline-block;
}
#media only screen and (max-width: 600px) {
.width {
background-color: black;
width: 200px;
height: 100px;
}
.width1 {
width: 500px;
}
}
<div class="container-fluid ">
<div class="row">
<div class="badge width col-md-offset-1 col-lg-offset-1 col-xl-offset-1">
Hello I am in component 1.
</div>
<div class="badge width col-md-offset-1 col-lg-offset-1 col-xl-offset-1">
Hello I am in component2.
</div>
<div class="badge width col-md-offset-1 col-lg-offset-1 col-xl-offset-1">
Hello I am in component3.
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="badge width col-md-offset-1 col-lg-offset-1 col-xl-offset-1">
Hello I am in component 4.
</div>
<div class="badge width1 col-md-offset-1 col-lg-offset-1 col-xl-offset-1">
Hello I am in component 5.
</div>
</div>
</div>
The result that I am getting for a medium screen is given below and this is the result that I want:
However the problem arises , when I try to increase my browser resolution using 'CTRL +' . The orientation of the boxes gets jumbled up.But I want my result to look the same as it did in the medium settings.
The following is a screenshot of the result on larger screens.
How do I fix this?

Answer 1

I think what you need to do is better achieved using CSS Grid, it will allow you to build the layout with few rules and basically no media queries (if you intend the layout to be exactly the same all the time)... look at this:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
grid-gap: 20px;
}
.grid-item {
border: 1px solid;
}
.item5 {
grid-column: span 2;
}
section {
background-color: blue;
height: 100%;
color: #FFF;
}
<div class="grid-container">
<div class="grid-item item1">
<section>
Inner Section
</section>
</div>
<div class="grid-item item2">Item 2</div>
<div class="grid-item item3">Item 3</div>
<div class="grid-item item4">Item 4</div>
<div class="grid-item item5">Item 5</div>
</div>

Answer 2

I think the problem you're running into is using Ctrl + in the hopes of increasing your browser width. Ctrl + is just meant to enlarge text for accessibility reasons.
To effectively manage browser/viewport width in Chrome, right click your page, select Inspect. With the Inspect pane open, your browser window will now have the width x height in the top right of the page.
As for your code, I'm not able to reproduce the result in the first image you sent (it has obviously different CSS than in the provided snippet).
To make this work as you are wanting, I would suggest looking into Flexbox, it's relatively new and pretty powerful so definitely worth learning.