How to override a height assigned to a div?

Asked

Viewed 178 times

1

I’m using bootstrap and this is my css: 

.painel-altura{
    height: 540px;
}

@media (min-width: 630px) {

}

I would like to cancel this height and leave it the size before 540px. I’m trying to use @media but I don’t know how to do it! Within each img tag is associated an image, with exactly 252 X 252 .

     <div class="row slideanim">
                    <div class="col-sm-6 col-xs-12">
                        <div class="panel panel-default text-center painel-altura">
                            <div class="panel-heading bg-cor-panel-blue">
                                <h1>Recicle....</h1>
                            </div>
                            <div class="panel-body">
                                <img src="../img/icones/recycled.png" class="img-responsive centralizar">
                            </div>
                            <div class="panel-footer">
                                <p><strong>xxxx xxxxx xxxxxxxx x x xxxx  xxxx   xxxxxxxxxxxx xxxxx  xxxxx  xxx xxx</strong></p>
                            </div>
                        </div>      
                    </div>     
                    <div class="col-sm-6 col-xs-12">
                        <div class="panel panel-default text-center">
                            <div class="panel-heading bg-cor-panel-blue">
                                <h1>Substitua o alumínio</h1>
                            </div>
                            <div class="panel-body">

                                <img src="../img/icones/container.png" class="img-responsive centralizar">
                            </div>
                            <div class="panel-footer">
                                <p><strong>xxxx xxxxx xxxxxxxx x x xxxx  xxxx   xxxxxxxxxxxx xxxxx  xxxxx  xxx xxx
                                    xxxx xxxxx xxxxxxxx x x xxxx  xxxx   xxxxxxxxxxxx xxxxx  xxxxx  xxx xxxx
                                    xxxx xxxxx xxxxxxxx x x xxxx  xxxx   xxxxxxxxxxxx xxxxx  xxxxx  xxx xxx
                                    xxxx xxxxx xxxxxxxx x x xxxx  xxxx   xxxxxxxxxxxx xxxxx  xxxxx  xxx xxx
                                    xxxx xxxxx xxxxxxxx x x xxxx  xxxx   xxxxxxxxxxxx xxxxx  xxxxx  xxx xxx
                                    </strong></p>
                            </div>
                        </div>      
                    </div>
   </div>
html css bootstrap-3

  • What size do you want her to get? And when you want her that size?

  • @Thiagosantos I want it to look great when it’s being viewed on the desktop and back to normal when it’s being viewed on mobile!!

  • I don’t understand, could you explain?

1 answer

1

I do it this way:

div{
height:700px;
width:700px;
border:1px solid black;
}
@media(max-width:480px){
  div{
    height:250px;
    width:250px;
  }
}
<div>Sua div</div>

Then when screen size is less than 480px the rule of mediawill be applied.

To view the effect click on the whole page mode and resize your screen.

Anything comments that adjusts agent.

Browser other questions tagged html css bootstrap-3

You are not signed in. Login or sign up in order to post.