I am facing an issue with my layout design. I am trying to create a menu that consists of a header and a 2x2 tile grid, which should transform into a 1x4 grid on smaller screens.
Objective - Large screen (Red = Header, Green = Tile)
On smaller screens, the layout displays the header bar and the 4 tiles below it as intended:
Objective and current state - Small screen
However, when I resize the screen to make it larger, the grid transforms into a 2x2 layout. But further increasing the screen size causes the grid to stop expanding horizontally, resulting in the following output:
HTML
<div class="overlay-content" id="container-fluid">
<div class="row">
<div class="tile col-md-6 border">
<a href="#">asdf</a>
</div>
<div class="tile col-md-6 border">
<a href="#">asfd</a>
</div>
<div class="tile col-md-6 border">
<a href="#">asdf</a>
</div>
<div class="tile col-md-6 border">
<a href="#">asdf</a>
</div>
</div>
</div>
CSS
.overlay {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
}
.overlay-header{
border:10px;
font-family:fontNavbar;
filter: invert(100%);
}
.overlay-content {
position: absolute;
height: 100%;
text-align: center;
display:flex;
}
Can someone advise on what I might be missing in my code? Your help is much appreciated!