I am working on a layout that consists of an outer div with 5 inner divs nested within it.
------------------------------------
| <div title> |
| <div value><div unit> |
| <div subvalue|
| <div date>|
The challenge I am facing is making the outer div responsive while ensuring that the elements inside maintain their position. The title should be on the left, the value in the center along with its unit, and the remaining two elements should stay at the bottom right. However, achieving this has proven to be difficult for me as a developer:
CSS Code:
.container{
border: 1px solid #57c0e8;
background-color: white;
cursor: pointer;
height: auto;
width: auto;
border-radius: 10px;
}
.title {
color:grey;
font-size: 0.8em;
margin-left:2%;
}
.valueAndUnit {
text-align: center;
display: block;
}
.value{
margin-top: 3%;
min-height:25px;
font-size: 2.1em;
display: inline-block;
}
.unit {
display: inline-block;
}
.subValue {
text-align: right;
min-height:25px;
font-size:1em;
}
.date {
min-height:25px;
color:lightslategrey;
text-align: right;
font-size: 1em;
}
.subValueAndDate {
margin-right: 6%;
}
@media only screen and (max-width: 770px) {
.title {
font-size: 1.3vw;
}
.value{
font-size: 3.1vw;
}
.unit{
font-size:2vw;
}
.subValue{
font-size:2.5vw;
}
}
This is what the container looks like:
https://i.sstatic.net/PQSZD.png
HTML:
<div className={styles.container}>
<div className={styles.title}>
{title}
</div>
<div className={styles.valueAndUnit} style={style}>
<div className={styles.value}>
{value}
</div>
<div className={styles.unit}>
{unit}
</div>
</div>
<div className={styles.subValueAndDate}>
<div className={styles.subValue}>
{subValue}
</div>
<div className={styles.date}>
{date}
</div>
</div>
</div>