Wsparcie » Używanie i konfiguracja WordPressa » Wycentrowanie (wyśrodkowanie) galerii – problem

  • Witam, mam tworzony przez zew. firmę szablon, ale niestety mnie zlali i już mi pomóc nie chcą po skasowaniu forsy. Próbowałem sam to ogarnąć na swoim localhoście ale nie idzie… Mianowicie chciałbym wycentrować galerię.

    Żebym nie wyszedł na lenia grzebałem w sieci i próbowałem zmienić funkcję float: na none i center ale jak to robię to zamiast mi wycentować galerię to ją centruje, ale każda kolumna jest jedna pod drugą zamiast być wycentowane koło siebie.

    CSS od galerii wygląda tak:

    /*  ----------------------------------------------------------------------------
        default wordpress gallery
    */
    /*  ----------------------------------------------------------------------------
        gallery
    */
    .gallery:after,
    .gallery:before {
      clear: both;
      content: "";
      display: table;
    }
    .gallery-caption {
      color: #220e10;
      font-size: 18px;
      font-style: italic;
      font-weight: 300;
    }
    .gallery {
      margin-bottom: 21px;
    }
    .gallery-item {
      float: left;
      margin: 0 4px 4px 0;
      overflow: hidden;
      position: relative;
    }
    .gallery-columns-1.gallery-size-medium,
    .gallery-columns-1.gallery-size-thumbnail,
    .gallery-columns-2.gallery-size-thumbnail,
    .gallery-columns-3.gallery-size-thumbnail {
      display: table;
      margin: 0 auto 20px;
    }
    .gallery-columns-1 .gallery-item {
      text-align: center;
      max-width: 36.75%;
      max-width: -webkit-calc(32.75%);
      max-width: calc(96%);
      /* responsive portrait tablet */
    
    }
    @media (min-width: 768px) and (max-width: 1018px) {
      .gallery-columns-1 .gallery-item {
        max-width: 100%;
        max-width: -webkit-calc(100%);
        max-width: calc(100%);
      }
    }
    .gallery-columns-2 .gallery-item {
      text-align: center;
      max-width: 50%;
      max-width: -webkit-calc(46%);
      max-width: calc(46%);
      height: 170px;
      /* responsive portrait tablet */
    
      /* responsive phone */
    
    }
    @media (min-width: 768px) and (max-width: 1018px) {
      .gallery-columns-2 .gallery-item {
        height: 130px;
        max-width: 49%;
        max-width: -webkit-calc(49%);
        max-width: calc(49%);
      }
    }
    @media (max-width: 767px) {
      .gallery-columns-2 .gallery-item {
        max-width: 32%;
        max-width: -webkit-calc(28%);
        max-width: calc(28%);
        height: 90px;
      }
    }
    .gallery-columns-3 .gallery-item {
      text-align: center;
      max-width: 36.5%;
      max-width: -webkit-calc(32.5%);
      max-width: calc(32.5%);
      height: 110px;
      /* responsive portrait tablet */
    
      /* responsive monitor */
    
      /* responsive phone */
    
    }
    @media (min-width: 768px) and (max-width: 1018px) {
      .gallery-columns-3 .gallery-item {
        max-width: 32.4%;
        max-width: -webkit-calc(32.4%);
        max-width: calc(32.4%);
        height: 85px;
      }
    }
    @media (min-width: 1200px) {
      .gallery-columns-3 .gallery-item {
        max-width: 36.7%;
        max-width: -webkit-calc(32.7%);
        max-width: calc(32.7%);
        height: 125px;
      }
    }
    @media (max-width: 767px) {
      .gallery-columns-3 .gallery-item {
        height: 80px;
      }
    }
    .gallery-columns-4 .gallery-item {
      text-align: center;
      max-width: 23%;
      max-width: -webkit-calc(21%);
      max-width: calc(21%);
      height: 85px;
      /* responsive portrait tablet */
    
      /* responsive phone */
    
    }
    @media (min-width: 768px) and (max-width: 1018px) {
      .gallery-columns-4 .gallery-item {
        max-width: 24.1%;
        max-width: -webkit-calc(24.1%);
        max-width: calc(24.1%);
        height: 70px;
      }
    }
    @media (max-width: 767px) {
      .gallery-columns-4 .gallery-item {
        height: 90px;
      }
    }
    .gallery-columns-5 .gallery-item {
      text-align: center;
      max-width: 19%;
      max-width: -webkit-calc(16%);
      max-width: calc(16%);
      height: 60px;
      /* responsive portrait tablet */
    
      /* responsive phone */
    
    }
    .gallery-columns-5 .gallery-item .gallery-caption {
      display: none;
    }
    @media (min-width: 768px) and (max-width: 1018px) {
      .gallery-columns-5 .gallery-item {
        max-width: 22.5%;
        max-width: -webkit-calc(18.5%);
        max-width: calc(18.5%);
        height: 55px;
      }
    }
    @media (max-width: 767px) {
      .gallery-columns-5 .gallery-item {
        height: 90px;
      }
    }
    .gallery-columns-6 .gallery-item {
      text-align: center;
      max-width: 15%;
      max-width: -webkit-calc(12.7%);
      max-width: calc(12.7%);
      height: 50px;
      /* responsive portrait tablet */
    
      /* responsive phone */
    
    }
    .gallery-columns-6 .gallery-item .gallery-caption {
      display: none;
    }
    @media (min-width: 768px) and (max-width: 1018px) {
      .gallery-columns-6 .gallery-item {
        height: 35px;
      }
    }
    @media (max-width: 767px) {
      .gallery-columns-6 .gallery-item {
        height: 90px;
      }
    }
    .gallery-columns-7 .gallery-item {
      text-align: center;
      max-width: 13%;
      max-width: -webkit-calc(10.28%);
      max-width: calc(10.28%);
      height: 40px;
      /* responsive portrait tablet */
    
      /* responsive phone */
    
    }
    @media (min-width: 768px) and (max-width: 1018px) {
      .gallery-columns-7 .gallery-item {
        height: 32px;
      }
    }
    @media (max-width: 767px) {
      .gallery-columns-7 .gallery-item {
        height: 90px;
      }
    }
    .gallery-columns-8 .gallery-item {
      text-align: center;
      max-width: 11%;
      max-width: -webkit-calc(8.5%);
      max-width: calc(8.5%);
      height: 35px;
      /* responsive portrait tablet */
    
      /* responsive phone */
    
    }
    @media (min-width: 768px) and (max-width: 1018px) {
      .gallery-columns-8 .gallery-item {
        height: 25px;
      }
    }
    @media (max-width: 767px) {
      .gallery-columns-8 .gallery-item {
        height: 90px;
      }
    }
    .gallery-columns-9 .gallery-item {
      text-align: center;
      max-width: 9%;
      max-width: -webkit-calc(7.1%);
      max-width: calc(7.1%);
      height: 30px;
      /* responsive phone */
    
    }
    @media (max-width: 767px) {
      .gallery-columns-9 .gallery-item {
        height: 90px;
      }
    }
    .gallery-item {
      /* responsive phone */
    
    }
    @media (max-width: 767px) {
      .gallery-item {
        width: calc(49%) !important;
      }
    }
    .gallery-caption {
      background-color: rgba(0, 0, 0, 0.7);
      box-sizing: border-box;
      color: #fff;
      font-size: 12px;
      line-height: 1.3;
      margin: 0;
      max-height: 50%;
      opacity: 0;
      padding: 2px 8px;
      position: absolute;
      bottom: 0;
      left: 0;
      text-align: left;
      -webkit-transition: opacity 400ms ease;
      transition: opacity 400ms ease;
      width: 100%;
    }
    .gallery-caption:before {
      box-shadow: 0 -10px 15px #000000 inset;
      content: "";
      height: 100%;
      min-height: 49px;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }
    .gallery-item:hover .gallery-caption {
      opacity: 1;
    }
    .gallery-columns-7 .gallery-caption,
    .gallery-columns-8 .gallery-caption,
    .gallery-columns-9 .gallery-caption {
      display: none;
    }
    /* responsive phone */
    @media (max-width: 767px) {
      .gallery {
        margin-left: 0;
      }
      .gallery .gallery-item,
      .gallery-columns-2.gallery-size-thumbnail .gallery-item {
        max-width: none;
        width: 49%;
        width: -webkit-calc(46%);
        width: calc(46%);
      }
      .gallery-columns-1.gallery-size-medium,
      .gallery-columns-1.gallery-size-thumbnail,
      .gallery-columns-2.gallery-size-thumbnail,
      .gallery-columns-3.gallery-size-thumbnail {
        display: block;
      }
      .gallery-columns-1 .gallery-item,
      .gallery-columns-1.gallery-size-medium .gallery-item,
      .gallery-columns-1.gallery-size-thumbnail .gallery-item {
        text-align: center;
        width: 98%;
        width: -webkit-calc(96%);
        width: calc(96%);
      }
      .gallery-columns-3 .gallery-item:nth-of-type(3n),
      .gallery-columns-5 .gallery-item:nth-of-type(5n),
      .gallery-columns-7 .gallery-item:nth-of-type(7n),
      .gallery-columns-9 .gallery-item:nth-of-type(9n) {
        margin-right: 4px;
      }
      .gallery br {
        display: none;
      }
      .gallery .gallery-item:nth-of-type(even) {
        margin-right: 0;
      }
    }
    /*  ----------------------------------------------------------------------------

    Będę wdzięczny za pomoc!!!

Viewing 1 replies (of 1 total)
  • A możesz zarzucić linkiem do strony gdzie występuje problem? …bo z samych tylko styli, bez kodu do jakiego one się odnoszą ciężko coś wysnuć.

Viewing 1 replies (of 1 total)
  • Temat ‘Wycentrowanie (wyśrodkowanie) galerii – problem’ jest zamknięty na nowe odpowiedzi.