I want to create a block that contains 3 main elements: a header, a list, and a chart. When the screen width drops below a certain value, I want the order of the elements to change. Here's how it should look:Image may be NSFW.
Clik here to view.
Here are the requirements:
.chartshould have a minimum height..chart__datasetscan have any height depending on the number of items..chart__canvasshould always maintain a 1:1 aspect ratio (only on large screens)..chart__datasetsand.chart__canvasshould always be horizontally centered within the block..chart__datasetsshould take up 70% of.chartwidth, and the.chart__canvas30%.- There should be at least a 20px gap between the
.chart__headerand the.chart__datasets.
I have created a basic layout. I used flex for everything. The header has position: absolute, and I wrapped the list and the chart in a div with the class chart__body and centered them relative to each other within it. But there's an issue: if the list (dataset) has a large height, it starts overlapping with the header, and I don't know how to fix this yet.
html, body, .page { height: 100%;}body { margin: 0;}.page { display: flex; align-items: center; justify-content: center; background: #ecf0f1;}.chart { width: 450px; padding: 15px 15px; min-height: 200px; display: flex; flex-direction: column; position: relative; background: #fff; border: 1px solid #7f8c8d;}.chart__title { position: absolute; top: 0; left: 15px; background: #3498db; width: 50%; height: 25px;}.chart__body { width: 100%; height: 100%; display: flex; align-items: center; flex-grow: 1; column-gap: 15px;}.chart__datasets { width: 70%; height: 50px; background: #f1c40f;}.chart__canvas { background: #2ecc71; width: 100px; height: 100px;}@media (max-width: 600px) { .chart__body { margin-top: 60px; flex-direction: column-reverse; align-items: normal; row-gap: 15px; } .chart__datasets { width: 100%; flex-grow: 1; } .chart__canvas { width: 100%; height: 50px; }}<div class="page"><div class="chart"><h3 class="chart__title"></h3><div class="chart__body"><div class="chart__datasets"></div><div class="chart__canvas"></div></div></div></div>