My attempt to create a responsive design resembling a table using vh and vw units for height and width is facing some challenges. The goal was to have 5 rows and 3 columns. Initially, the design looked good on both mobile phones and notebooks with just two rows. However, adding a third row caused the design to break on notebooks, while it remained aesthetically pleasing on mobile devices.
Here's the HTML code:
<!DOCTYPE html>
<html lang = "de">
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset = "utf-8">
<link rel = "stylesheet" href = "./css/style.css">
</head>
<body>
<div id = 'reihe1'>
<div id = 'spalte1reihe1'>
</div>
<div id = 'spalte2reihe1'>
</div>
<div id = 'spalte3reihe1'>
</div>
</div>
... (Code snippet continues)
And here's the CSS code:
* { box-sizing: border-box;}
... (CSS rules continue)
Upon validating the code, no errors were found, leaving me puzzled as to what might be causing the issue. You can view the problem by visiting this link.
Thank you for your assistance!