I have a h3 and I want to give margin-top , but it only works if I put a size greater than 500px. If I lower the value to 499, it does not work and there is no margin. The div that I need margin is the one that says "Start div news", the one with a yellow background.
The first image is with 500px, and the second is with 400px:
This is my code:
/*XS*/
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
.aux
{
background-color: #F2F2F2;
}
.fch_button
{
border-top: solid 1px #BDBDBD;
padding-top: 25px;
padding-bottom: 0px;
}
.carousel
{
background-color: black;
}
.margin30m
{
margin-top: 30px;
}
.imacrsl
{
/*height: 250px;*/
max-height: 250px;
}
.redess
{
display: none;
}
.toleft
{
text-align: left;
}
.margintabla div
{
margin-top: 5px;
}
.carousel-caption
{
background-color: unset;
width:100%;
margin-left:-15%;
height: 20px;
max-height: 20px;
margin-bottom: 20%;
opacity: 0.9;
}
.img-rounded
{
font-size: 16px;
border-radius: 0;
color:white;
background-color: black;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
}
}
/*COL-SM*/
@media only screen and (min-width: 768px){
.aux
{
background-color: #F2F2F2;
}
.fch_button
{
border-top: solid 1px #BDBDBD;
padding-top: 25px;
padding-bottom: 0px;
}
.resumen_titulo
{
min-height: 80px;
}
.img_min
{
display: inline-block;
width: auto;
max-height: 180px;
text-align: center;
}
.carousel-caption {
background-color: black;
width:100%;
margin-left:-20%;
opacity: 0.7;
}
.modal-xl {
width: 86%;
max-width:86%;
}
.imacrsl {
width: auto;
height: 430px;
max-height: 430px;
}
.carousel-inner {
text-align: center;
}
.carousel
{
background-color: black;
}
}
/*COL-MD*/
@media only screen and (min-width: 992px){
.aux
{
background-color: #F2F2F2;
}
.fch_button
{
border-top: solid 1px #BDBDBD;
padding-top: 25px;
padding-bottom: 0px;
}
.resumen_titulo
{
min-height: 80px;
}
.img_min
{
display: inline-block;
width: auto;
max-height: 140px;
text-align: center;
}
.carousel-caption {
background-color: black;
width:100%;
margin-left:-20%;
opacity: 0.7;
}
.imacrsl {
width: auto;
max-height: 430px;
}
.carousel-inner {
text-align: center;
}
.carousel
{
background-color: black;
}
}
/*COL-LG*/
@media only screen and (min-width: 1200px) {
.carousel-caption {
background-color: black;
width:100%;
margin-left:-20%;
opacity: 0.7;
}
.modal-xl {
width: 86%;
max-width:86%;
}
.imacrsl {
width: auto;
height: 430px;
max-height: 430px;
}
.carousel-inner {
text-align: center;
}
.carousel
{
background-color: black;
}
.img_min
{
display: inline-block;
width: auto;
max-height: 160px;
text-align: center;
}
.margin30m
{
margin-top: 30px;
}
.aux
{
background-color: #F2F2F2;
}
.fch_button
{
border-top: solid 1px #BDBDBD;
padding-top: 25px;
padding-bottom: 0px;
}
.resumen_titulo
{
min-height: 80px;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-9 col-xs-12">
<!--inicio div seccion 1-->
<div class="">
<div id="myCarousel" class="carousel slide col-md-12" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div id="divres" class="carousel-inner peopleCarouselImg" role="listbox">
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
</div>
<!--fin div carousel-->
</div>
<!--inicio div noticias-Este div necesito MRGIN-TOP-->
<div style="background-color: yellow;margin-top:500px;" class="">
<h3>Noticias</h3>
<div id="div_not" class="row">
</div>
</div>
<!--fin div noticias-->
</div>
<!--fin div 1 seccion-->