CODEWITHSUNDEEP
htmlcssbootstrap-4
M.I
M.I

Reputation: 409

make div elements inside a container responsive

so basically i have an outer div that contains 5 inner divs.

------------------------------------
| <div title>                       |   

|             <div value><div unit> |

|                      <div subvalue|

|                         <div date>|

so this is basically my div. i have set the width and height of the outer div to auto because i thought if i want it to be responsive i should do that. what i need is to give the div height and width but the elements inside to stay responsive( ex: the title should stay on the left, the value should stay in the middle of the entire container even if it gets bigger with the unit, the two remaining should stay bottom right) and i have no idea how to do that i really need help:

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 the actual container:

container

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>

Upvotes: 2

Views: 812

Answers (1)

Martin
Martin

Reputation: 2414

Since you tagged Bootstrap, you could make use of the Grid style of the framework and make some minor tweaks using the flexbox classes.

HTML:

<div class="outer-div">
    <div class="row d-flex">
        <div class="col-6 text-left">
            yes
        </div>
    </div>
    <div class="row d-flex">
        <div class="col-12 text-center">
            1111 unit
        </div>
    </div>
    <div class="row d-flex flex-row-reverse">
        <div class="col-6 text-right">
            1234
        </div>
    </div>
    <div class="row d-flex flex-row-reverse">
        <div class="col-10 text-right">
            05/14/3030 4:12
        </div>
    </div>
</div>

CSS:

.outer-div {
    border: solid green 1px;
    border-radius: 5px;
    width: 35%;
    margin-left: 30%;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 1%;
}

Snippet Example:

.outer-div {
	border: solid green 1px;
	border-radius: 5px;
	width: 35%;
	margin-left: 30%;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 1%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="outer-div">
	<div class="row d-flex">
		<div class="col-6 text-left">
			yes
		</div>
	</div>
	<div class="row d-flex">
		<div class="col-12 text-center">
			1111 unit
		</div>
	</div>
	<div class="row d-flex flex-row-reverse">
		<div class="col-6 text-right">
			1234
		</div>
	</div>
	<div class="row d-flex flex-row-reverse">
		<div class="col-10 text-right">
			05/14/3030 4:12
		</div>
	</div>
</div>

Codepen Example here.

Upvotes: 0

Related Questions