Seccion Responsive

[DjDance]

Hola Muchachos !!
Espero puedan ayudarme con esto ...

Tengo esta sección parallax en mi html ...

Código:

<div id="sec-parallax">
<div class="dzsparallaxer auto-init out-of-bootstrap" data-options='{direction: "normal"}' style="height: 400px;">
    <div class="divimage dzsparallaxer--target" style="width: 100%; height: 600px; background-image: url(img/foto-1.jpg)"></div>

<div class="semi-black-overlay"></div>
    <div class="parallaxtitle">
    <h1>Solicitud de Inscripción</h1>
    </div>
</div>
</div>

Necesito que la altura de esta sección disminuya con resoluciones menores ...
el problema es que aparece en el html y no esta dada por css.
como puedo decirle a la sección style="height: 400px; que disminuya la altura con resoluciones menores??

[andresgarciadev]

a que te refieres por "y no esta dada por css."?
lo normal para estos casos seria usar @media

[DjDance]

Hola !!

Mira ... el código que puse esta en el html ... y lo que aparece en negrita es el
alto de la sección ... la clase .dzsparallaxer tiene un alto en el CSS pero no la achica por medio de @media ... me imagino que no lo hace ya que esta en el html ...

Esa es mi duda ...

[herzbazi]

Iniciado por DjDance

Hola !!

Mira ... el código que puse esta en el html ... y lo que aparece en negrita es el
alto de la sección ... la clase .dzsparallaxer tiene un alto en el CSS pero no la achica por medio de @media ... me imagino que no lo hace ya que esta en el html ...

Esa es mi duda ...

entonces lo que yo haria es crear una clase y reemplazar

algo asi

Código HTML:

<div id="sec-parallax">
<div class="dzsparallaxer auto-init out-of-bootstrap" data-options='{direction: "normal"}'[B] class="miclase"[/B] >
    <div class="divimage dzsparallaxer--target"  [B]class="miotraclase"[/B]></div>
 
<div class="semi-black-overlay"></div>
    <div class="parallaxtitle">
    <h1>Solicitud de Inscripción</h1>
    </div>
</div>
</div>
 

luego

Código CSS:

.miclase{height: 400px;}
.miotraclase{width: 100%; height: 600px; background-image: url(img/foto-1.jpg)}
 

despues usar los medias query https://developer.mozilla.org/es/docs/CSS/Media_queries

ejemplo

Código CSS:

@media (max-width: 767px){
    .miclase{[B]height: 200px[/B];}
    .miotraclase{width: 100%; [B]height: 300px[/B]; background-image: url(img/foto-1.jpg)}
}
 

lógicamente debes de hacerlo conforme a tus necesidades eso que esta son solo ejemplos

espero te ayude.

[DjDance]

Lo intente pero no da resultado !!

[herzbazi]

ya viste que el codigo que te puse tiene

<class="miotraclase">

en el css y html aparecen una si lo pusiste tal cual yo lo he colocado te fallara por que fue error del editor que no puso con negrilla lo que esta encerrado en las b

y si continua sin funcionar ponele !important;