0

No tengo mucha idea de web responsiva pero tengo una imagen que desde PC esta centrada, sin embargo, cuando entro desde el móvil me sale sólo la parte izquierda y no queda centrada la foto

Estoy usando una plantilla que es exactamente esta, podeis ver lo que pasa en https://freehtml5.co/demos/wedding/

¿Como podría hacerlo para que en móviles quede centrada? ¿Hay alguna propiedad para esto? ¿Donde debo usarla? Gracias de antemano

.fh5co-cover {
  height: 900px;
  background-size: cover;
  // background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  .overlay {
    z-index: 0;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
  }
  >.fh5co-container {
    position: relative;
    z-index: 10;
  }
  @media screen and (max-width: $screen-sm) {
    height: 600px;
  }
  .display-t,
  .display-tc {
    height: 900px;
    display: table;
    width: 100%;
    @media screen and (max-width: $screen-sm) {
      height: 600px;
    }
  }
  &.fh5co-cover-sm {
    height: 600px;
    @media screen and (max-width: $screen-sm) {
      height: 400px;
    }
    .display-t,
    .display-tc {
      height: 600px;
      display: table;
      width: 100%;
      @media screen and (max-width: $screen-sm) {
        height: 400px;
      }
    }
  }
}
<header id="fh5co-header" class="fh5co-cover" role="banner" style="background-image:url(https://freehtml5.co/demos/wedding/images/img_bg_2.jpg);" data-stellar-background-ratio="0.5">
  <div class="overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2 text-center">
        <div class="display-t">
          <div class="display-tc animate-box" data-animate-effect="fadeIn">
            <h1>Joefrey &amp; Sheila</h1>
            <h2>We Are Getting Married</h2>
            <div class="simply-countdown simply-countdown-one"></div>
            <p><a href="#" class="btn btn-default btn-sm">Save the date</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

2
  • 1
    Ahora, explica tu problema concreto y lo que has intentado siguiendo ejemplo mínimo verificable. Un saludo
    – lois6b
    el 29 mar. 2019 a las 9:57
  • 1
    El ejemplo esta claro cual es, si lo veo desde PC se ve bien, si lo pongo en movil no se centra. Quiero que se centre tambien en movil. Lo que he intentado es darle position center pero hay algo que cambia en cuanto hago scroll. He intentado con !important pero prevalece lo otro y lo descuadra. No se como hacerlo.. el 29 mar. 2019 a las 9:59

0

Tu Respuesta

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

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