I'm new to CSS and I could really use some guidance on my mobile web platform project. I am working on a concept landing page with four equal rectangular tiles, inspired by this image.
Although the design should be responsive for mobile devices, I can't seem to achieve the desired layout. Here is how my HTML is structured:
<div class="page-container">
<div class="tile-1"></div>
<div class="tile-2"></div>
<div class="tile-3"></div>
<div class="tile-4"></div>
</div>
Currently, my CSS looks like this...
html, body, .container {
height: 100%;
min-height: 100%;
}
.page-container {
margin: 0 auto;
border: 1px solid black;
height: 99%;
min-height: 99%;
width: 99%;
}
.tile-1, .tile-2, .tile-3, .tile-4 {
border: 1px solid black;
height: 48%;
width: 48%;
}
Unfortunately, the result is far from what I had in mind. I've heard that using percentage-based heights may not be the best approach. The current output looks like this: image link
I would greatly appreciate any help or advice on adjusting the height to achieve the desired layout.