Spazio Bianco tra Slider e Menu foto

di il
4 risposte

Spazio Bianco tra Slider e Menu foto

Salve,
premetto di non aver mai studiato CSS,
ho un problema relativo alla Slider Responsive,
tra la slider e il menu c'è spazio bianco, come posso toglierlo?


* display none until init */.owl-carousel {
  display: none;
  position: relative;
  width: 90%;
  margin: 20px auto;
  -ms-touch-action: pan-y; }
  .owl-carousel .owl-wrapper {
    display: none;
    position: relative;
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
    .owl-carousel .owl-wrapper:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0; }
  .owl-carousel .owl-wrapper-outer {
    overflow: hidden;
    position: relative;
    width: 100%; }
    .owl-carousel .owl-wrapper-outer.autoHeight {
      -webkit-transition: height 500ms ease-in-out;
      -o-transition: height 500ms ease-in-out;
      transition: height 500ms ease-in-out; }
  .owl-carousel .owl-item {
    float: left;
    padding: 0;
    overflow: hidden; }
    .owl-carousel .owl-item .item, .owl-carousel .owl-item .items {
      position: relative;
      z-index: 1;
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; }
      .owl-carousel .owl-item .item img, .owl-carousel .owl-item .items img {
        width: 100%; }
  .owl-carousel .owl-page, .owl-carousel .owl-buttons div {
    cursor: pointer; }
  .owl-carousel .owl-wrapper, .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  .owl-carousel.property-container .owl-item {
    padding: 0; }
  .owl-carousel.not-16-9 .owl-item .items img {
    max-width: none;
    width: auto; }


.owl-controls {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent; }


/* mouse grab icon */
.owl-theme {
  /* Styling Next and Prev buttons */ }
  .owl-theme .owl-controls {
    position: absolute;
    left: 50%;
    bottom: 30px;
    text-align: center;
    z-index: 1;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    /* Clickable class fix problem with hover on touch devices */
    /* Use it for non-touch hover action */
    /* Styling Pagination*/ }
    @media (max-width: 600px) {
      .owl-theme .owl-controls {
        width: 100%; } }
    .owl-theme .owl-controls .owl-buttons div {
      position: absolute;
      bottom: 30px;
      display: inline-block;
      zoom: 1;
      *display: inline;
      /*IE7 life-saver */
      color: #000000;
      font: 0/0 a;
      color: transparent;
      text-shadow: none;
      background-color: transparent;
      border: 0;
      width: 30px;
      height: 45px; }
      @media (min-width: 768px) and (max-width: 992px) {
        .owl-theme .owl-controls .owl-buttons div {
          bottom: 100%; } }
      @media (max-width: 767px) {
        .owl-theme .owl-controls .owl-buttons div {
          bottom: 100%; } }
      .owl-theme .owl-controls .owl-buttons div:after, .owl-theme .owl-controls .owl-buttons div:before {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        width: 30px;
        height: 1px;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background: #000000; }
      .owl-theme .owl-controls .owl-buttons div:before {
        top: 31px; }
      .owl-theme .owl-controls .owl-buttons div:hover:after, .owl-theme .owl-controls .owl-buttons div:hover:before {
        background: #FFFFFF; }
      .owl-theme .owl-controls .owl-buttons div.owl-next {
        right: -145px; }
        .owl-theme .owl-controls .owl-buttons div.owl-next:after {
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg); }
        .owl-theme .owl-controls .owl-buttons div.owl-next:before {
          -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          transform: rotate(-45deg); }
      .owl-theme .owl-controls .owl-buttons div.owl-prev {
        left: -145px; }
        .owl-theme .owl-controls .owl-buttons div.owl-prev:after {
          -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          transform: rotate(-45deg); }
        .owl-theme .owl-controls .owl-buttons div.owl-prev:before {
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg); }
    .owl-theme .owl-controls.clickable .owl-buttons div:hover {
      opacity: 1;
      filter: alpha(opacity=100);
      text-decoration: none; }
    .owl-theme .owl-controls .owl-pagination {
      display: inline-block; }
    .owl-theme .owl-controls .owl-page {
      display: inline-block;
      zoom: 1;
      *display: inline;
      /*IE7 life-saver */ }
    .owl-theme .owl-controls .owl-page span {
      background: #333333;
      display: block;
      margin: 5px 3px;
      width: 15px;
      height: 15px;
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      /* If PaginationNumbers is true */ }
      .owl-theme .owl-controls .owl-page span.owl-numbers {
        width: auto;
        height: auto;
        color: #FFFFFF;
        padding: 2px 10px;
        font-size: 12px;
        -moz-border-radius: 30px;
        -webkit-border-radius: 30px;
        border-radius: 30px; }
    .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span {
      background: #C5A46D; }


/* preloading images */
.owl-item.loading {
  min-height: 150px;
  background: url(AjaxLoader.html) no-repeat center center; }


/**




* Main Slider style */
#home-top-section {
  position: relative; }


#main-slider, #fullscreen-slider, #room-details-slider {
  width: 100%;
  margin: 0; }
  #main-slider img, #fullscreen-slider img, #room-details-slider img {
    width: 100%; }
  #main-slider .owl-wrapper, #fullscreen-slider .owl-wrapper, #room-details-slider .owl-wrapper {
    width: 100vw !important;
    height: 100vh !important;
    left: 0 !important;
    position: relative;
    -moz-transform: translateX(0) !important;
    -ms-transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important; }
  #main-slider .owl-item, #fullscreen-slider .owl-item, #room-details-slider .owl-item {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
    width: 100vw;
    height: 100%;
    max-height: 100vh;
    overflow: hidden; }
    #main-slider .owl-item.active, #fullscreen-slider .owl-item.active, #room-details-slider .owl-item.active {
      opacity: 1;
      filter: alpha(opacity=100); }
  @media (max-width: 992px) {
    #main-slider .owl-controls, #fullscreen-slider .owl-controls, #room-details-slider .owl-controls {
      bottom: 30px; }
    #main-slider .items, #fullscreen-slider .items, #room-details-slider .items {
      width: 100vw;
      height: 100vh; }
      #main-slider .items img, #fullscreen-slider .items img, #room-details-slider .items img {
        position: absolute;
        left: 50%;
        top: 50%;
        width: auto;
        height: 100%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%); } }


/**  

4 Risposte

  • Re: Spazio Bianco tra Slider e Menu foto

    Potrebbero essere diversi i motivi per cui hai questo spazio bianco.
    Margini, altezze, ecc.

    Dal codice che hai postato sembra che ci sia un'altezza fissa per questo elemento
    #main-slider .owl-wrapper, #fullscreen-slider .owl-wrapper, #room-details-slider .owl-wrapper 
    Prova a controllare questo valore
    height: 100vh !important;
  • Re: Spazio Bianco tra Slider e Menu foto

    Ho provato ad abbassare di volta in volta quel valore ma la slider risulta tagliata
  • Re: Spazio Bianco tra Slider e Menu foto

    Non ho capito. Abbassando questo valore, si taglia la slide, ma non lo spazio sottostante?

    Hai provato a vedere con strumenti come Ispeziona di Chrome qual'è l'elemento che cre lo spazio?
  • Re: Spazio Bianco tra Slider e Menu foto

    Lo spazio sottostante si allinea perfettamente, ma le foto risultano tagliate,
    il valore che ho modificato è quello da te specificato
Devi accedere o registrarti per scrivere nel forum
4 risposte