0

Tengo un h3 y le quiero dar margin-top, pero solamente me funciona si pongo un tamaño mayor a 500px. Si yo bajo el valor a 499, no funciona y queda sin margen. El div que necesito margin es el que dice "Inicio div noticias", el que tiene fondo amarillo.

La primera imagen es con 500px, y la segunda es con 400px:

Imagen con 500PX margin-top

Imagen con 400px margin-top

Éste es mi código:

/*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-->

6
  • Puedes añadir el css que estás usando'? el 17 may. 2017 a las 6:54
  • @AlbertoMartínez añadido.
    – Luis Pavez
    el 17 may. 2017 a las 8:36
  • Por lo que veo no tienes ningún h3 en tu css, por lo que puede ser que dado el tamaño del contenedor no quepa y lo omita, prueba a ponerlo fuera del contenedor el 17 may. 2017 a las 8:40
  • @AlbertoMartínez lo hice, pero tampoco toma el margin
    – Luis Pavez
    el 17 may. 2017 a las 8:48
  • El código que compartes parece verse bien y no tener problemas con 500px o 400px. ¿Seguro que has incluido todo el código relevante? ¿Puede que haya más CSS que afecte a tu página?
    – Alvaro Montoro
    el 19 may. 2017 a las 12:39

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.