1

Есть такой табличный элемент: https://jsfiddle.net/hgfmu6ws/

@import url('https://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic');
@font-face {
  font-family: NorthwoodHigh;
  /* Vainglory Font */
  src: url(../fonts/NorthwoodHigh.ttf);
}

@font-face {
  font-family: roboto;
  /* Roboto Font */
  src: url(../fonts/roboto.ttf);
}

body {
  background-image: url(../img/minionsplayingVG.jpg);
  background-size: 100%;
  margin: 0;
  padding: 0;
}

.her {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding-top: 1em;
  background: rgba(0%, 0%, 0%, 0.8);
}

@media (min-width:768px) {
  .her {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 18%;
    width: 60%;
    padding: 2em;
    background: rgba(0%, 0%, 0%, 0.8);
  }
}


/* Heroes Style */

.heroes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flipc {
  -webkit-perspective: 1000;
  perspective: 1000;
  display: inline-block;
  margin: 0 0.5em;
}

.flipc:hover .flipper {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flipc,
.front,
.back {
  width: 8em;
  height: 12em;
  -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
}

.flipper {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}

.front,
.back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}

.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.hex {
  display: inline-block;
  width: 8em;
  height: 12em;
  ;
  background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(grey));
  ;
  background-image: linear-gradient(to bottom, white 0%, grey 100%);
  -webkit-box-shadow: inset 10px 50px 100px rgba(0, 0, 0, 0.9);
  box-shadow: inset 10px 50px 100px rgba(0, 0, 0, 0.9);
  -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
}

.hexin {
  position: absolute;
  top: 2%;
  left: 2%;
  width: 96%;
  height: 96%;
  background: url(../img/heroes/Backface.jpg);
  -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
  font-family: NorthwoodHigh;
  color: aliceblue;
}

.hexin p {
  padding: 1em 0.2em;
  font-size: 1.5em;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.hexin p img {
  width: 26%;
  margin: 10px 4px 0 4px;
}

.heroname {
  position: absolute;
  display: inline;
  right: 0;
  padding: 0 5px 0 0;
  top: 55%;
  background: rgba(0%, 0%, 0%, 0.7);
  color: aliceblue;
  font-size: 1.5em;
}


/* Heroes Style End */

#hero1 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.heroh {
  background: rgba(0%, 0%, 0%, 0.5);
  margin: 0.5em 0;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 2em;
  text-align: center;
  color: white;
}

.herocont {
  font-family: NorthwoodHigh;
  font-size: 1em;
  color: aliceblue;
}

.herocarousel {
  width: 100%;
  height: 5.5em;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  ms-overflow-style: none;
}

.heroprl {
  position: relative;
  display: inline-flex;
  top: 1%;
  left: 1%;
  height: 98%;
  width: 98%;
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

.herocarousel::-webkit-scrollbar {
  display: none;
}

.bord {
  display: inline-flex;
  background-image: linear-gradient(to bottom, white 0%, grey 100%);
  height: 5em;
  width: 5em;
  margin: 0 -8px 0 0;
  -webkit-box-shadow: inset 30px 50px 90px rgba(0, 0, 0, 0.9);
  box-shadow: inset 30px 50px 90px rgba(0, 0, 0, 0.9);
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

.bord:hover {
  transform: translate(0, 6px);
  /*-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);*/
}

.heroallw {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.herow {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 6em;
  width: 14em;
  margin: 4px;
  border: 1px solid blue;
}

.herowrare {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 6em;
  width: 100%;
  margin: 4px;
  border-radius: 2px;
}

@media (min-width:500px) {
  .herowrare {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 14em;
    margin: 4px;
    border-radius: 2px;
  }
}

.herowepic {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 6em;
  width: 100%;
  margin: 4px;
  border-radius: 2px;
}

@media (min-width:500px) {
  .herowepic {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 14em;
    margin: 4px;
    border-radius: 2px;
  }
}

.herowlegendary {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 6em;
  width: 100%;
  margin: 4px;
  border-radius: 2px;
}

@media (min-width:500px) {
  .herowlegendary {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 14em;
    margin: 4px;
    border-radius: 2px;
  }
}

.herowsele {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 6em;
  width: 100%;
  margin: 4px;
  border-radius: 2px;
}

@media (min-width:500px) {
  .herowsele {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 14em;
    margin: 4px;
    border-radius: 2px;
  }
}

.heroallw img {
  position: relative;
  width: 100%;
}

.herowrare .ImageCaption {
  font-size: 1em;
  position: absolute;
  bottom: 0em;
  width: 100%;
  padding: 4px;
  text-align: center;
  background: rgba(0%, 40%, 100%, 0.3);
  color: white;
}

.herowepic .ImageCaption {
  font-size: 1em;
  position: absolute;
  bottom: 0em;
  width: 100%;
  padding: 4px;
  text-align: center;
  background: rgba(41%, 0%, 73%, 0.3);
  color: white;
}

.herowlegendary .ImageCaption {
  font-size: 1em;
  position: absolute;
  bottom: 0em;
  width: 100%;
  padding: 4px;
  text-align: center;
  background: rgba(96%, 91%, 4%, 0.3);
  color: white;
}

.herowsele .ImageCaption {
  font-size: 1em;
  position: absolute;
  bottom: 0em;
  width: 100%;
  padding: 4px;
  text-align: center;
  background: rgba(100%, 0%, 0%, 0.3);
  color: white;
}


/*------------------------------------------*/

.preutx {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  background-color: rgba(0%, 0%, 0%, 0.5);
  padding: 6px;
  border-radius: 6px;
}

.presen {
  display: none;
}

@media (min-width:1400px) {
  .presen {
    display: block;
    width: 200px;
    height: 144px;
    margin-right: 2em;
  }
}

.preutx p {
  font-family: 'Open Sans', sans-serif;
  color: white;
  padding: 4px 10px;
}

.preutx table {
  font-family: 'Open Sans', sans-serif;
  color: white;
}

.preutx table td {
  background: rgba(53%, 53%, 53%, 0.1);
  padding: 5px 10px;
  color: white;
  font-size: 0.7em;
  border-radius: 4px;
}

@media (min-width:500px) {
  .preutx table td {
    background: rgba(53%, 53%, 53%, 0.1);
    padding: 5px 10px;
    font-size: 1em;
    color: white;
    border-radius: 4px;
  }
}

.preutx table td:nth-child(2n+2) {
  background: rgba(53%, 53%, 53%, 0.1);
  color: white;
  text-align: center;
}

.utx {
  position: relative;
  display: block;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em;
  color: white;
  margin-left: 1vh;
}

@media (min-width:500px) {
  .utx {
    position: relative;
    display: block;
    width: 200px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8em;
    color: white;
    margin-left: 1vh;
  }
}

.abl {
  position: relative;
  background-color: rgba(10%, 10%, 10%, 0.8);
  width: 96%;
  height: 15px;
  padding: 1%;
  margin: 0.5em 0;
}

@media (min-width:500px) {
  .abl {
    background-color: rgba(10%, 10%, 10%, 0.8);
    width: 170px;
    height: 15px;
    padding: 5px;
    margin: 0.5em 0;
  }
}

.abl span {
  display: inline-block;
  height: 100%;
}

.ablfl span {
  background-color: #ba3030;
}

section {
  transition-property: all;
  position: relative;
  display: flex;
  opacity: 0;
  height: 0;
  width: 100%;
}

section img {
  float: left;
  opacity: 0;
  height: 6vh;
  width: 6vh;
}

input {
  display: none;
}

label {
  display: block;
  width: 50px;
  height: 50px;
  padding: 2px;
  margin: 2px;
  background-color: #141414;
}

label img {
  position: relative;
  width: 50px;
  height: 50px;
  filter: grayscale(0.9);
}

label img:hover {
  filter: grayscale(0);
}

label:hover {
  color: #888;
  cursor: pointer;
}

input:checked + label img {
  filter: grayscale(0);
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  transition-property: all;
  transition: opacity 0.3s ease-in;
  display: flex;
  flex-wrap: wrap;
  height: auto;
  margin-top: 4px;
  font-family: 'Open Sans', sans-serif;
  color: white;
  opacity: 1;
  padding: 1em;
}

#tab1:checked ~ #content1 img,
#tab2:checked ~ #content2 img,
#tab3:checked ~ #content3 img,
#tab4:checked ~ #content4 img {
  float: left;
  opacity: 1;
  height: 6vh;
  width: 6vh;
}

.ch {
  position: relative;
  left: 0.4em;
  display: block;
  font-size: 1em;
}

.chl {
  position: relative;
  left: 0.6em;
  top: 0.3em;
  display: block;
  font-size: 0.7em;
}

.chcont {
  position: relative;
  display: block;
  margin-top: 1em;
}

section table {
  text-align: center;
  margin-top: 1em;
  font-size: 0.4em;
}

@media (min-width:400px) {
  section table {
    text-align: center;
    margin-top: 1em;
    font-size: 0.6em;
  }
}

@media (min-width:570px) {
  section table {
    text-align: center;
    margin-top: 1em;
    font-size: 1em;
  }
}

section td {
  background: rgba(53%, 53%, 53%, 0.1);
  color: white;
  border-radius: 4px;
}

section td:nth-child(2n+2) {
  background: rgba(64%, 64%, 64%, 0.1);
  color: white;
}

section td:nth-child(1) {
  text-align: left;
}

section td.ss {
  background: rgba(39%, 37%, 100%, 0.5);
}

section td.ss2 {
  background: rgba(100%, 37%, 37%, 0.5);
}

.updyn {
  position: absolute;
  display: block;
  margin: 3px;
  padding: 0.4em;
  right: 6px;
  border-radius: 4px;
  background: rgba(35%, 35%, 35%, 0.5);
  font-size: 0.4em;
  font-family: 'Open Sans', sans-serif;
  color: white;
}

@media (min-width:430px) {
  .updyn {
    position: absolute;
    display: block;
    margin: 3px;
    padding: 0.4em;
    right: 6px;
    border-radius: 4px;
    background: rgba(35%, 35%, 35%, 0.5);
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
    color: white;
  }
}

.prebuildh {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(0%, 0%, 0%, 0.5);
  padding: 15px;
}

.buildh {
  display: inline-flex;
  background: rgba(100%, 37%, 37%, 0.5);
  padding: 6px;
  margin: 10px;
  border-radius: 6px;
}

.prebuildh .buildh img {
  width: 25px;
  height: 25px;
  padding: 0 1px;
}

@media (min-width:350px) {
  .prebuildh .buildh img {
    width: 30px;
    height: 30px;
    padding: 0 2px;
  }
}

@media (min-width:700px) {
  .prebuildh .buildh img {
    width: 50px;
    height: 50px;
    padding: 0 5px;
  }
}

.buildh2 {
  display: inline-flex;
  background: rgba(39%, 37%, 100%, 0.5);
  padding: 6px;
  margin: 10px;
  border-radius: 6px;
}

.prebuildh .buildh2 img {
  width: 30px;
  height: 30px;
  padding: 0 5px;
}

@media (min-width:500px) {
  .prebuildh .buildh2 img {
    width: 50px;
    height: 50px;
    padding: 0 5px;
  }
}
<div class="heroh">Способности</div>
<div class="preutx">
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1"><img src="img/heroes/Ringo/double-down.png"></label>
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2"><img src="img/heroes/Ringo/achilles-shot.png"></label>
  <input id="tab3" type="radio" name="tabs">
  <label for="tab3"><img src="img/heroes/Ringo/twirling-silver.png"></label>
  <input id="tab4" type="radio" name="tabs">
  <label for="tab4"><img src="img/heroes/Ringo/hellfire-brew.png"></label>
  <!-- Content -->
  <section id="content1">
    <img src="img/heroes/Ringo/double-down.png">
    <div>
      <div class="ch">Double Down (Ва-Банк)</div>
      <div class="chl">Умение героя</div>
    </div>
    <div class="chcont">Следующая базовая атака Ринго после убийства любого противника будет критическим ударом.</div>
  </section>
  <section id="content2">
    <img src="img/heroes/Ringo/achilles-shot.png">
    <div class="updyn">Патч 2.5</div>
    <div>
      <div class="ch">Achilles Shot (Ахиллесов выстрел)</div>
      <div class="chl">A-Skill</div>
    </div>
    <div class="chcont">Ринго стреляет в пятку своей цели (или другую нижнюю конечность), замедляя ее и нанося урон.
      <table>
        <tr>
          <td>Характеристики</td>
          <td>LVL 1</td>
          <td>LVL 2</td>
          <td>LVL 3</td>
          <td>LVL 4</td>
          <td>LVL 5</td>
          <td class="ss">% от кристалла</td>
          <td class="ss2">% от оружия</td>
        </tr>
        <tr>
          <td>Восстановление</td>
          <td>9</td>
          <td>8.5</td>
          <td>8</td>
          <td>7.5</td>
          <td>7</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Расход энергии</td>
          <td>40</td>
          <td>850</td>
          <td>60</td>
          <td>70</td>
          <td>100</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Урон</td>
          <td>80</td>
          <td>125</td>
          <td>170</td>
          <td>215</td>
          <td>350</td>
          <td class="ss">125%</td>
          <td></td>
        </tr>
        <tr>
          <td>Замедление</td>
          <td>30%</td>
          <td>35%</td>
          <td>40%</td>
          <td>45%</td>
          <td>50%</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Длительность замедления</td>
          <td>1.5</td>
          <td>1.5</td>
          <td>1.5</td>
          <td>1.5</td>
          <td>2.5</td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
  </section>
  <section id="content3">
    <img src="img/heroes/Ringo/twirling-silver.png">
    <div class="updyn">Патч 2.5</div>
    <div>
      <div class="ch">Twirling Silver (Серебряный вихрь)</div>
      <div class="chl">B-Skill</div>
    </div>
    <div class="chcont">Ринго ведет сумасшедший огонь по своей цели, значительно увеличивая скорость атаки и перемещения на время действия умения.
      <p>При активации сбрасывается восстановление базовой атаки.</p>
      <table>
        <tr>
          <td>Характеристики</td>
          <td>LVL 1</td>
          <td>LVL 2</td>
          <td>LVL 3</td>
          <td>LVL 4</td>
          <td>LVL 5</td>
          <td class="ss">% от кристалла</td>
          <td class="ss2">% от оружия</td>
        </tr>
        <tr>
          <td>Восстановление</td>
          <td>9</td>
          <td>9</td>
          <td>9</td>
          <td>9</td>
          <td>9</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Расход энергии</td>
          <td>50</td>
          <td>55</td>
          <td>60</td>
          <td>65</td>
          <td>70</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Урон</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td class="ss">80%</td>
          <td></td>
        </tr>
        <tr>
          <td>Длительность</td>
          <td>6</td>
          <td>6</td>
          <td>6</td>
          <td>6</td>
          <td>6</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Скорость атаки</td>
          <td>15%</td>
          <td>25%</td>
          <td>35%</td>
          <td>45%</td>
          <td>65%</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Скорость передвижения</td>
          <td>0.75</td>
          <td>0.8</td>
          <td>0.85</td>
          <td>0.9</td>
          <td>1</td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
  </section>
  <section id="content4">
    <img src="img/heroes/Ringo/hellfire-brew.png">
    <div class="updyn">Патч 2.5</div>
    <div>
      <div class="ch">Hellfire Brew (Адское пламя)</div>
      <div class="chl">C-Skill</div>
    </div>
    <div class="chcont">Ринго делает большой глоток из фляги и выдыхает в свою цель спепеляющий огненный шар. При столкновении шар взрывается и воспламеняет жертву, обжигая ее и находящихся рядом врагов на протяжении 7 сек.
      <table>
        <tr>
          <td>Характеристики</td>
          <td>LVL 1</td>
          <td>LVL 2</td>
          <td>LVL 3</td>
          <td class="ss">% от кристалла</td>
          <td class="ss2">% от оружия</td>
        </tr>
        <tr>
          <td>Восстановление</td>
          <td>100</td>
          <td>85</td>
          <td>70</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Расход энергии</td>
          <td>100</td>
          <td>115</td>
          <td>130</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Урон</td>
          <td>250</td>
          <td>365</td>
          <td>480</td>
          <td class="ss">75%</td>
          <td></td>
        </tr>
        <tr>
          <td>Урон от ожога</td>
          <td>30</td>
          <td>50</td>
          <td>70</td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
  </section>
</div>

При уменьшении размера экрана, справа появляется все больше и больше места, что рушит всю структуру сайта. Не знаю уже что делать. overflow-x: hidden не помогает, да и больше на костыль похоже, чем на решение.

13
  • В Хроме не вижу проблем Commented 11 июл. 2017 в 11:48
  • joxi.ru/J2bJYb1SXyMqq2 с хрома смотрю
    – Paul Wall
    Commented 11 июл. 2017 в 11:50
  • take.ms/GyCYr Commented 11 июл. 2017 в 11:51
  • сожми сильнее, там есть какое то магическое окно, когда при сжатии все нормально, а затем снова валится, ты видимо в него попал)) в общем сжимай до максимума, чтобы проблему увидеть
    – Paul Wall
    Commented 11 июл. 2017 в 11:52
  • сжимал до предела, потом разжимал взад - нет проблем) Commented 11 июл. 2017 в 11:54

2 ответа 2

1

Предположу:

section {
  flex-flow: row wrap;
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic');
@font-face {
    font-family: NorthwoodHigh; /* Vainglory Font */
    src: url(../fonts/NorthwoodHigh.ttf);
   }
@font-face {
    font-family: roboto; /* Roboto Font */
    src: url(../fonts/roboto.ttf);
   }
body {
    background-image: url(../img/minionsplayingVG.jpg);
    background-size: 100%;
    margin: 0;
    padding: 0;
}
.her {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding-top: 1em;
    background: rgba(0%, 0%, 0%, 0.8);
}
@media (min-width:768px) {
    .her {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 18%;
    width: 60%;
    padding: 2em;
    background: rgba(0%, 0%, 0%, 0.8);
}
}
/* Heroes Style */
.heroes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.flipc {
    -webkit-perspective: 1000;
            perspective: 1000;
    display: inline-block;
    margin: 0 0.5em;
}
.flipc:hover .flipper {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
.flipc, .front, .back {
    width: 8em;
    height: 12em;
    -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
            clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
}
.flipper {
    -webkit-transition: 0.4s;
    transition: 0.4s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    position: absolute;
}
.back {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
.hex {
    display: inline-block;
    width: 8em;
    height: 12em;;
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(grey));;
    background-image: linear-gradient(to bottom, white 0%, grey 100%);
    -webkit-box-shadow: inset 10px 50px 100px rgba(0,0,0,0.9);
            box-shadow: inset 10px 50px 100px rgba(0,0,0,0.9);
    -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
            clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
}
.hexin { 
    position: absolute;
    top: 2%;
    left: 2%;
    width: 96%;
    height: 96%;
    background: url(../img/heroes/Backface.jpg);
    -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
            clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
    font-family: NorthwoodHigh;
    color: aliceblue;
}
.hexin p {
    padding: 1em 0.2em;
    font-size: 1.5em;
    text-align: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.hexin p img {
    width: 26%;
    margin: 10px 4px 0 4px;
}
.heroname {
    position: absolute;
    display: inline;
    right: 0;
    padding: 0 5px 0 0;
    top: 55%;
    background: rgba(0%, 0%, 0%, 0.7);
    color: aliceblue;
    font-size: 1.5em;
}
/* Heroes Style End */
#hero1 {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.heroh {
    background: rgba(0%, 0%, 0%, 0.5);
    margin: 0.5em 0;
    border-radius: 6px;
    font-family: 'Open Sans', sans-serif;
    font-size: 2em;
    text-align: center;
    color: white;
}
.herocont {
    font-family: NorthwoodHigh;
    font-size: 1em;
    color: aliceblue; 
}
.herocarousel {
    width: 100%;
    height: 5.5em;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    ms-overflow-style: none;
}
.heroprl {
    position: relative;
    display: inline-flex;
    top: 1%;
    left: 1%;
    height: 98%;
    width: 98%;
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
.herocarousel::-webkit-scrollbar {
    display: none;
}
.bord {
    display: inline-flex;
    background-image: linear-gradient(to bottom, white 0%, grey 100%);
    height: 5em;
    width: 5em;
    margin: 0 -8px 0 0;
    -webkit-box-shadow: inset 30px 50px 90px rgba(0,0,0,0.9);
            box-shadow: inset 30px 50px 90px rgba(0,0,0,0.9);
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
.bord:hover {
        transform: translate(0, 6px);
        /*-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);*/

}
.heroallw {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}
.herow {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 14em;
    margin: 4px;
    border: 1px solid blue;
}
.herowrare {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 100%;
    margin: 4px;
    border-radius: 2px;
}
@media (min-width:500px) {
.herowrare {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 14em;
    margin: 4px;
    border-radius: 2px;
}  
}
.herowepic {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 100%;
    margin: 4px;
    border-radius: 2px;
}
@media (min-width:500px) {
.herowepic {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 14em;
    margin: 4px;
    border-radius: 2px;
}
}
.herowlegendary {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 100%;
    margin: 4px;
    border-radius: 2px;
}
@media (min-width:500px) {
.herowlegendary {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 14em;
    margin: 4px;
    border-radius: 2px;
}
}
.herowsele {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 100%;
    margin: 4px;
    border-radius: 2px;
}
@media (min-width:500px) {
.herowsele {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 14em;
    margin: 4px;
    border-radius: 2px;
}
}
.heroallw img {
    position: relative;
    width: 100%;
}
.herowrare .ImageCaption {
	font-size: 1em;
	position: absolute;
	bottom: 0em;
    width: 100%;
    padding: 4px;
    text-align: center;
    background: rgba(0%, 40%, 100%, 0.3);
    color: white;
    
}
.herowepic .ImageCaption {
	font-size: 1em;
	position: absolute;
	bottom: 0em;
    width: 100%;
    padding: 4px;
    text-align: center;
    background: rgba(41%, 0%, 73%, 0.3);
    color: white;
    
}
.herowlegendary .ImageCaption {
	font-size: 1em;
	position: absolute;
	bottom: 0em;
    width: 100%;
    padding: 4px;
    text-align: center;
    background: rgba(96%, 91%, 4%, 0.3);
    color: white;
    
}
.herowsele .ImageCaption {
	font-size: 1em;
	position: absolute;
	bottom: 0em;
    width: 100%;
    padding: 4px;
    text-align: center;
    background: rgba(100%, 0%, 0%, 0.3);
    color: white;
    
}

/*------------------------------------------*/
.preutx {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    background-color: rgba(0%, 0%, 0%, 0.5);
    padding: 6px;
    border-radius: 6px;
}
.presen {
    display: none;    
}
@media (min-width:1400px) {
    .presen {
    display: block;
    width: 200px;
    height: 144px;
    margin-right: 2em;
}
}
.preutx p{
    font-family: 'Open Sans', sans-serif;
    color: white;
    padding: 4px 10px;
}
.preutx table {
    font-family: 'Open Sans', sans-serif;
    color: white;
}
.preutx table td {
    background: rgba(53%, 53%, 53%, 0.1);
    padding: 5px 10px;
    color: white;
    font-size: 0.7em;
    border-radius: 4px;
}
@media (min-width:500px) {
    .preutx table td {
    background: rgba(53%, 53%, 53%, 0.1);
    padding: 5px 10px;
    font-size: 1em;
    color: white;
    border-radius: 4px;
}
}
.preutx table td:nth-child(2n+2) {
    background: rgba(53%, 53%, 53%, 0.1);
    color: white;
    text-align: center;
}
.utx {
    position: relative;
    display: block;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8em;
    color: white;
    margin-left: 1vh;
    }
@media (min-width:500px) {
    .utx {
    position: relative;
    display: block;
    width: 200px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8em;
    color: white;
    margin-left: 1vh;
    }
}
.abl {
    position: relative;
    background-color: rgba(10%, 10%, 10%, 0.8);
    width: 96%;
    height: 15px;
    padding: 1%;
    margin: 0.5em 0;
}
@media (min-width:500px) {
    .abl {
    background-color: rgba(10%, 10%, 10%, 0.8);
    width: 170px;
    height: 15px;
    padding: 5px;
    margin: 0.5em 0;
}
}
.abl span {
    display: inline-block;
    height: 100%;
}
.ablfl span {
    background-color: #ba3030;
}
section {
    transition-property: all;
    position: relative;
    display: flex;
    opacity: 0;
    height: 0;
    width: 100%;    
}
section img {
    float: left;
    opacity: 0;
    height: 6vh;
    width: 6vh;
}
input {
  display: none;
}
label {
    display: block;
    width: 50px;
    height: 50px;
    padding: 2px;
    margin: 2px;
    background-color: #141414;
}
label img {
    position: relative;
    width: 50px;
    height: 50px;
    filter: grayscale(0.9);
    }
label img:hover {
    filter: grayscale(0);
    }
label:hover {
    color: #888;
    cursor: pointer;
}
input:checked + label img{
  filter: grayscale(0);
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
    transition-property: all;
    transition: opacity 0.3s ease-in;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    margin-top: 4px;
    font-family: 'Open Sans', sans-serif;
    color: white;
    opacity: 1;
    padding: 1em;
}
#tab1:checked ~ #content1 img,
#tab2:checked ~ #content2 img,
#tab3:checked ~ #content3 img,
#tab4:checked ~ #content4 img{
    float: left;
    opacity: 1;
    height: 6vh;
    width: 6vh;
}
.ch {
    position: relative;
    left: 0.4em;
    display: block;
    font-size: 1em;
}
.chl {
    position: relative;
    left: 0.6em;
    top: 0.3em;
    display: block;
    font-size: 0.7em;
}
.chcont {
    position: relative;
    display: block; 
    margin-top: 1em;
}
section table {
    text-align: center;
    margin-top: 1em;
    font-size: 0.4em;
}
@media (min-width:400px) {
    section table {
    text-align: center;
    margin-top: 1em;
    font-size: 0.6em;
}
}
@media (min-width:570px) {
    section table {
    text-align: center;
    margin-top: 1em;
    font-size: 1em;
}
}
section td {
    background: rgba(53%, 53%, 53%, 0.1);
    color: white;
    border-radius: 4px;
}
section td:nth-child(2n+2) {
    background: rgba(64%, 64%, 64%, 0.1);
    color: white;
}
section td:nth-child(1) {
    text-align: left;
}
section td.ss {
    background: rgba(39%, 37%, 100%, 0.5);
}
section td.ss2 {
    background: rgba(100%, 37%, 37%, 0.5);
}
.updyn {
    position: absolute;
    display: block;
    margin: 3px;
    padding: 0.4em;
    right: 6px;
    border-radius: 4px;
    background: rgba(35%, 35%, 35%, 0.5);
    font-size: 0.4em;
    font-family: 'Open Sans', sans-serif;
    color: white;
}
@media (min-width:430px) {
        .updyn {
    position: absolute;
    display: block;
    margin: 3px;
    padding: 0.4em;
    right: 6px;
    border-radius: 4px;
    background: rgba(35%, 35%, 35%, 0.5);
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
    color: white;
}
}
.prebuildh {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    background: rgba(0%, 0%, 0%, 0.5);
    padding: 15px;
    
}
.buildh {
    display: inline-flex;
    background: rgba(100%, 37%, 37%, 0.5);
    padding: 6px;
    margin: 10px;
    border-radius: 6px;
}
.prebuildh .buildh img {
    width: 25px;
    height: 25px;
    padding: 0 1px;
}
@media (min-width:350px) {
   .prebuildh .buildh img {
    width: 30px;
    height: 30px;
    padding: 0 2px;
} 
}
@media (min-width:700px) {
   .prebuildh .buildh img {
    width: 50px;
    height: 50px;
    padding: 0 5px;
} 
}
.buildh2 {
    display: inline-flex;
    background: rgba(39%, 37%, 100%, 0.5);
    padding: 6px;
    margin: 10px;
    border-radius: 6px;
}
.prebuildh .buildh2 img {
    width: 30px;
    height: 30px;
    padding: 0 5px;
}
@media (min-width:500px) {
   .prebuildh .buildh2 img {
    width: 50px;
    height: 50px;
    padding: 0 5px;
} 
}

section {
  flex-flow: row wrap;
}
<div class="heroh">Способности</div>
<div class="preutx">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><img src="img/heroes/Ringo/double-down.png"></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><img src="img/heroes/Ringo/achilles-shot.png"></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><img src="img/heroes/Ringo/twirling-silver.png"></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><img src="img/heroes/Ringo/hellfire-brew.png"></label>
<!-- Content -->
 <section id="content1">
<img src="img/heroes/Ringo/double-down.png">
<div><div class="ch">Double Down (Ва-Банк)</div>
<div class="chl">Умение героя</div></div>
<div class="chcont">Следующая базовая атака Ринго после убийства любого противника будет критическим ударом.</div>
  </section>
  <section id="content2">
<img src="img/heroes/Ringo/achilles-shot.png"><div class="updyn">Патч 2.5</div>
<div><div class="ch">Achilles Shot (Ахиллесов выстрел)</div>
<div class="chl">A-Skill</div></div>
<div class="chcont">Ринго стреляет в пятку своей цели (или другую нижнюю конечность), замедляя ее и нанося урон.<table>
    <tr>
        <td>Характеристики</td>
        <td>LVL 1</td>
        <td>LVL 2</td>
        <td>LVL 3</td>
        <td>LVL 4</td>
        <td>LVL 5</td>
        <td class="ss">% от кристалла</td>
        <td class="ss2">% от оружия</td>
    </tr>
    <tr>
        <td>Восстановление</td>
        <td>9</td>
        <td>8.5</td>
        <td>8</td>
        <td>7.5</td>
        <td>7</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Расход энергии</td>
        <td>40</td>
        <td>850</td>
        <td>60</td>
        <td>70</td>
        <td>100</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Урон</td>
        <td>80</td>
        <td>125</td>
        <td>170</td>
        <td>215</td>
        <td>350</td>
        <td class="ss">125%</td>
        <td></td>
    </tr>
    <tr>
        <td>Замедление</td>
        <td>30%</td>
        <td>35%</td>
        <td>40%</td>
        <td>45%</td>
        <td>50%</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Длительность замедления</td>
        <td>1.5</td>
        <td>1.5</td>
        <td>1.5</td>
        <td>1.5</td>
        <td>2.5</td>
        <td></td>
        <td></td>
    </tr>
</table></div>
</section>
<section id="content3">
<img src="img/heroes/Ringo/twirling-silver.png"><div class="updyn">Патч 2.5</div>
<div><div class="ch">Twirling Silver (Серебряный вихрь)</div>
<div class="chl">B-Skill</div></div>
<div class="chcont">Ринго ведет сумасшедший огонь по своей цели, значительно увеличивая скорость атаки и перемещения на время действия умения.
<p>При активации сбрасывается восстановление базовой атаки.</p>
<table>
    <tr>
        <td>Характеристики</td>
        <td>LVL 1</td>
        <td>LVL 2</td>
        <td>LVL 3</td>
        <td>LVL 4</td>
        <td>LVL 5</td>
        <td class="ss">% от кристалла</td>
        <td class="ss2">% от оружия</td>
    </tr>
    <tr>
        <td>Восстановление</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Расход энергии</td>
        <td>50</td>
        <td>55</td>
        <td>60</td>
        <td>65</td>
        <td>70</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Урон</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td class="ss">80%</td>
        <td></td>
    </tr>
    <tr>
        <td>Длительность</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Скорость атаки</td>
        <td>15%</td>
        <td>25%</td>
        <td>35%</td>
        <td>45%</td>
        <td>65%</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Скорость передвижения</td>
        <td>0.75</td>
        <td>0.8</td>
        <td>0.85</td>
        <td>0.9</td>
        <td>1</td>
        <td></td>
        <td></td>
    </tr>
</table></div>
</section>
<section id="content4">
<img src="img/heroes/Ringo/hellfire-brew.png"><div class="updyn">Патч 2.5</div>
<div><div class="ch">Hellfire Brew (Адское пламя)</div>
<div class="chl">C-Skill</div></div>
<div class="chcont">Ринго делает большой глоток из фляги и выдыхает в свою цель спепеляющий огненный шар. При столкновении шар взрывается и воспламеняет жертву, обжигая ее и находящихся рядом врагов на протяжении 7 сек.
<table>
    <tr>
        <td>Характеристики</td>
        <td>LVL 1</td>
        <td>LVL 2</td>
        <td>LVL 3</td>
        <td class="ss">% от кристалла</td>
        <td class="ss2">% от оружия</td>
    </tr>
    <tr>
        <td>Восстановление</td>
        <td>100</td>
        <td>85</td>
        <td>70</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Расход энергии</td>
        <td>100</td>
        <td>115</td>
        <td>130</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Урон</td>
        <td>250</td>
        <td>365</td>
        <td>480</td>
        <td class="ss">75%</td>
        <td></td>
    </tr>
    <tr>
        <td>Урон от ожога</td>
        <td>30</td>
        <td>50</td>
        <td>70</td>
        <td></td>
        <td></td>
    </tr>
</table></div>
</section>
    </div>

Как например вариант еще для таблички:

т.е. обернуть таблицу в .table-wrap

и задать

.table-wrap {
  width: 100%;
  overflow-x: hidden;
}
4
  • думаю, можно сказать, что помогло - joxi.ru/bmoBnLWsxWlwEr не подскажите, как добить ее внутрь? =)
    – Paul Wall
    Commented 11 июл. 2017 в 12:20
  • @PaulWall, добавила еще вариант, но я вижу вы на некоторых разрешениях уменьшаете размер шрифта в таблицах, вам нужно просто проверить каждое разрешение и подредактировать на каких уменьшать шрифт.
    – SVE
    Commented 11 июл. 2017 в 12:45
  • я заметил, что внутри таблицы большой отступ до краев, от текста до каждого участка блока, и я не пойму как его уменьшить, paddin не помогает, словно он игнорируется
    – Paul Wall
    Commented 11 июл. 2017 в 12:47
  • 1
    все я нашел косяк)) теперь все работает отлично))) еще раз спасибо))
    – Paul Wall
    Commented 11 июл. 2017 в 12:51
0

Cделайте для section display: none по умолчанию.

Также не стоит прятать section с помощью установки height: 0 и т.д. height в auto не анимируется, поэтому это тоже бессмысленные стили:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic');
@font-face {
  font-family: NorthwoodHigh;
  /* Vainglory Font */
  src: url(../fonts/NorthwoodHigh.ttf);
}

@font-face {
  font-family: roboto;
  /* Roboto Font */
  src: url(../fonts/roboto.ttf);
}

body {
  background-image: url(../img/minionsplayingVG.jpg);
  background-size: 100%;
  margin: 0;
  padding: 0;
}

.her {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding-top: 1em;
  background: rgba(0%, 0%, 0%, 0.8);
}

@media (min-width:768px) {
  .her {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 18%;
    width: 60%;
    padding: 2em;
    background: rgba(0%, 0%, 0%, 0.8);
  }
}


/* Heroes Style */

.heroes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flipc {
  -webkit-perspective: 1000;
  perspective: 1000;
  display: inline-block;
  margin: 0 0.5em;
}

.flipc:hover .flipper {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flipc,
.front,
.back {
  width: 8em;
  height: 12em;
  -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
}

.flipper {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}

.front,
.back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}

.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.hex {
  display: inline-block;
  width: 8em;
  height: 12em;
  ;
  background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(grey));
  ;
  background-image: linear-gradient(to bottom, white 0%, grey 100%);
  -webkit-box-shadow: inset 10px 50px 100px rgba(0, 0, 0, 0.9);
  box-shadow: inset 10px 50px 100px rgba(0, 0, 0, 0.9);
  -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
}

.hexin {
  position: absolute;
  top: 2%;
  left: 2%;
  width: 96%;
  height: 96%;
  background: url(../img/heroes/Backface.jpg);
  -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%);
  font-family: NorthwoodHigh;
  color: aliceblue;
}

.hexin p {
  padding: 1em 0.2em;
  font-size: 1.5em;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.hexin p img {
  width: 26%;
  margin: 10px 4px 0 4px;
}

.heroname {
  position: absolute;
  display: inline;
  right: 0;
  padding: 0 5px 0 0;
  top: 55%;
  background: rgba(0%, 0%, 0%, 0.7);
  color: aliceblue;
  font-size: 1.5em;
}


/* Heroes Style End */

#hero1 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.heroh {
  background: rgba(0%, 0%, 0%, 0.5);
  margin: 0.5em 0;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 2em;
  text-align: center;
  color: white;
}

.herocont {
  font-family: NorthwoodHigh;
  font-size: 1em;
  color: aliceblue;
}

.herocarousel {
  width: 100%;
  height: 5.5em;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  ms-overflow-style: none;
}

.heroprl {
  position: relative;
  display: inline-flex;
  top: 1%;
  left: 1%;
  height: 98%;
  width: 98%;
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

.herocarousel::-webkit-scrollbar {
  display: none;
}

.bord {
  display: inline-flex;
  background-image: linear-gradient(to bottom, white 0%, grey 100%);
  height: 5em;
  width: 5em;
  margin: 0 -8px 0 0;
  -webkit-box-shadow: inset 30px 50px 90px rgba(0, 0, 0, 0.9);
  box-shadow: inset 30px 50px 90px rgba(0, 0, 0, 0.9);
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

.bord:hover {
  transform: translate(0, 6px);
  /*-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);*/
}

.heroallw {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.herow {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 6em;
  width: 14em;
  margin: 4px;
  border: 1px solid blue;
}

.herowrare {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 6em;
  width: 100%;
  margin: 4px;
  border-radius: 2px;
}

@media (min-width:500px) {
  .herowrare {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 14em;
    margin: 4px;
    border-radius: 2px;
  }
}

.herowepic {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 6em;
  width: 100%;
  margin: 4px;
  border-radius: 2px;
}

@media (min-width:500px) {
  .herowepic {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 14em;
    margin: 4px;
    border-radius: 2px;
  }
}

.herowlegendary {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 6em;
  width: 100%;
  margin: 4px;
  border-radius: 2px;
}

@media (min-width:500px) {
  .herowlegendary {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 14em;
    margin: 4px;
    border-radius: 2px;
  }
}

.herowsele {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 6em;
  width: 100%;
  margin: 4px;
  border-radius: 2px;
}

@media (min-width:500px) {
  .herowsele {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 6em;
    width: 14em;
    margin: 4px;
    border-radius: 2px;
  }
}

.heroallw img {
  position: relative;
  width: 100%;
}

.herowrare .ImageCaption {
  font-size: 1em;
  position: absolute;
  bottom: 0em;
  width: 100%;
  padding: 4px;
  text-align: center;
  background: rgba(0%, 40%, 100%, 0.3);
  color: white;
}

.herowepic .ImageCaption {
  font-size: 1em;
  position: absolute;
  bottom: 0em;
  width: 100%;
  padding: 4px;
  text-align: center;
  background: rgba(41%, 0%, 73%, 0.3);
  color: white;
}

.herowlegendary .ImageCaption {
  font-size: 1em;
  position: absolute;
  bottom: 0em;
  width: 100%;
  padding: 4px;
  text-align: center;
  background: rgba(96%, 91%, 4%, 0.3);
  color: white;
}

.herowsele .ImageCaption {
  font-size: 1em;
  position: absolute;
  bottom: 0em;
  width: 100%;
  padding: 4px;
  text-align: center;
  background: rgba(100%, 0%, 0%, 0.3);
  color: white;
}


/*------------------------------------------*/

.preutx {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  background-color: rgba(0%, 0%, 0%, 0.5);
  padding: 6px;
  border-radius: 6px;
}

.presen {
  display: none;
}

@media (min-width:1400px) {
  .presen {
    display: block;
    width: 200px;
    height: 144px;
    margin-right: 2em;
  }
}

.preutx p {
  font-family: 'Open Sans', sans-serif;
  color: white;
  padding: 4px 10px;
}

.preutx table {
  font-family: 'Open Sans', sans-serif;
  color: white;
}

.preutx table td {
  background: rgba(53%, 53%, 53%, 0.1);
  padding: 5px 10px;
  color: white;
  font-size: 0.7em;
  border-radius: 4px;
}

@media (min-width:500px) {
  .preutx table td {
    background: rgba(53%, 53%, 53%, 0.1);
    padding: 5px 10px;
    font-size: 1em;
    color: white;
    border-radius: 4px;
  }
}

.preutx table td:nth-child(2n+2) {
  background: rgba(53%, 53%, 53%, 0.1);
  color: white;
  text-align: center;
}

.utx {
  position: relative;
  display: block;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em;
  color: white;
  margin-left: 1vh;
}

@media (min-width:500px) {
  .utx {
    position: relative;
    display: block;
    width: 200px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8em;
    color: white;
    margin-left: 1vh;
  }
}

.abl {
  position: relative;
  background-color: rgba(10%, 10%, 10%, 0.8);
  width: 96%;
  height: 15px;
  padding: 1%;
  margin: 0.5em 0;
}

@media (min-width:500px) {
  .abl {
    background-color: rgba(10%, 10%, 10%, 0.8);
    width: 170px;
    height: 15px;
    padding: 5px;
    margin: 0.5em 0;
  }
}

.abl span {
  display: inline-block;
  height: 100%;
}

.ablfl span {
  background-color: #ba3030;
}

section {
  transition-property: all;
  position: relative;
  /* По умолчанию элемент скрыт */
  display: none;
  opacity: 0;
  width: 100%;
}

section img {
  float: left;
  opacity: 0;
  height: 6vh;
  width: 6vh;
}

input {
  display: none;
}

label {
  display: block;
  width: 50px;
  height: 50px;
  padding: 2px;
  margin: 2px;
  background-color: #141414;
}

label img {
  position: relative;
  width: 50px;
  height: 50px;
  filter: grayscale(0.9);
}

label img:hover {
  filter: grayscale(0);
}

label:hover {
  color: #888;
  cursor: pointer;
}

input:checked + label img {
  filter: grayscale(0);
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  transition-property: all;
  transition: opacity 0.3s ease-in;
  display: flex;
  flex-wrap: wrap;
  margin-top: 4px;
  font-family: 'Open Sans', sans-serif;
  color: white;
  opacity: 1;
  padding: 1em;
}

#tab1:checked ~ #content1 img,
#tab2:checked ~ #content2 img,
#tab3:checked ~ #content3 img,
#tab4:checked ~ #content4 img {
  float: left;
  opacity: 1;
  height: 6vh;
  width: 6vh;
}

.ch {
  position: relative;
  left: 0.4em;
  display: block;
  font-size: 1em;
}

.chl {
  position: relative;
  left: 0.6em;
  top: 0.3em;
  display: block;
  font-size: 0.7em;
}

.chcont {
  position: relative;
  display: block;
  margin-top: 1em;
}

section table {
  text-align: center;
  margin-top: 1em;
  font-size: 0.4em;
}

@media (min-width:400px) {
  section table {
    text-align: center;
    margin-top: 1em;
    font-size: 0.6em;
  }
}

@media (min-width:570px) {
  section table {
    text-align: center;
    margin-top: 1em;
    font-size: 1em;
  }
}

section td {
  background: rgba(53%, 53%, 53%, 0.1);
  color: white;
  border-radius: 4px;
}

section td:nth-child(2n+2) {
  background: rgba(64%, 64%, 64%, 0.1);
  color: white;
}

section td:nth-child(1) {
  text-align: left;
}

section td.ss {
  background: rgba(39%, 37%, 100%, 0.5);
}

section td.ss2 {
  background: rgba(100%, 37%, 37%, 0.5);
}

.updyn {
  position: absolute;
  display: block;
  margin: 3px;
  padding: 0.4em;
  right: 6px;
  border-radius: 4px;
  background: rgba(35%, 35%, 35%, 0.5);
  font-size: 0.4em;
  font-family: 'Open Sans', sans-serif;
  color: white;
}

@media (min-width:430px) {
  .updyn {
    position: absolute;
    display: block;
    margin: 3px;
    padding: 0.4em;
    right: 6px;
    border-radius: 4px;
    background: rgba(35%, 35%, 35%, 0.5);
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
    color: white;
  }
}

.prebuildh {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(0%, 0%, 0%, 0.5);
  padding: 15px;
}

.buildh {
  display: inline-flex;
  background: rgba(100%, 37%, 37%, 0.5);
  padding: 6px;
  margin: 10px;
  border-radius: 6px;
}

.prebuildh .buildh img {
  width: 25px;
  height: 25px;
  padding: 0 1px;
}

@media (min-width:350px) {
  .prebuildh .buildh img {
    width: 30px;
    height: 30px;
    padding: 0 2px;
  }
}

@media (min-width:700px) {
  .prebuildh .buildh img {
    width: 50px;
    height: 50px;
    padding: 0 5px;
  }
}

.buildh2 {
  display: inline-flex;
  background: rgba(39%, 37%, 100%, 0.5);
  padding: 6px;
  margin: 10px;
  border-radius: 6px;
}

.prebuildh .buildh2 img {
  width: 30px;
  height: 30px;
  padding: 0 5px;
}

@media (min-width:500px) {
  .prebuildh .buildh2 img {
    width: 50px;
    height: 50px;
    padding: 0 5px;
  }
}
<div class="heroh">Способности</div>
<div class="preutx">
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1"><img src="img/heroes/Ringo/double-down.png"></label>
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2"><img src="img/heroes/Ringo/achilles-shot.png"></label>
  <input id="tab3" type="radio" name="tabs">
  <label for="tab3"><img src="img/heroes/Ringo/twirling-silver.png"></label>
  <input id="tab4" type="radio" name="tabs">
  <label for="tab4"><img src="img/heroes/Ringo/hellfire-brew.png"></label>
  <!-- Content -->
  <section id="content1">
    <img src="img/heroes/Ringo/double-down.png">
    <div>
      <div class="ch">Double Down (Ва-Банк)</div>
      <div class="chl">Умение героя</div>
    </div>
    <div class="chcont">Следующая базовая атака Ринго после убийства любого противника будет критическим ударом.</div>
  </section>
  <section id="content2">
    <img src="img/heroes/Ringo/achilles-shot.png">
    <div class="updyn">Патч 2.5</div>
    <div>
      <div class="ch">Achilles Shot (Ахиллесов выстрел)</div>
      <div class="chl">A-Skill</div>
    </div>
    <div class="chcont">Ринго стреляет в пятку своей цели (или другую нижнюю конечность), замедляя ее и нанося урон.
      <table>
        <tr>
          <td>Характеристики</td>
          <td>LVL 1</td>
          <td>LVL 2</td>
          <td>LVL 3</td>
          <td>LVL 4</td>
          <td>LVL 5</td>
          <td class="ss">% от кристалла</td>
          <td class="ss2">% от оружия</td>
        </tr>
        <tr>
          <td>Восстановление</td>
          <td>9</td>
          <td>8.5</td>
          <td>8</td>
          <td>7.5</td>
          <td>7</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Расход энергии</td>
          <td>40</td>
          <td>850</td>
          <td>60</td>
          <td>70</td>
          <td>100</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Урон</td>
          <td>80</td>
          <td>125</td>
          <td>170</td>
          <td>215</td>
          <td>350</td>
          <td class="ss">125%</td>
          <td></td>
        </tr>
        <tr>
          <td>Замедление</td>
          <td>30%</td>
          <td>35%</td>
          <td>40%</td>
          <td>45%</td>
          <td>50%</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Длительность замедления</td>
          <td>1.5</td>
          <td>1.5</td>
          <td>1.5</td>
          <td>1.5</td>
          <td>2.5</td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
  </section>
  <section id="content3">
    <img src="img/heroes/Ringo/twirling-silver.png">
    <div class="updyn">Патч 2.5</div>
    <div>
      <div class="ch">Twirling Silver (Серебряный вихрь)</div>
      <div class="chl">B-Skill</div>
    </div>
    <div class="chcont">Ринго ведет сумасшедший огонь по своей цели, значительно увеличивая скорость атаки и перемещения на время действия умения.
      <p>При активации сбрасывается восстановление базовой атаки.</p>
      <table>
        <tr>
          <td>Характеристики</td>
          <td>LVL 1</td>
          <td>LVL 2</td>
          <td>LVL 3</td>
          <td>LVL 4</td>
          <td>LVL 5</td>
          <td class="ss">% от кристалла</td>
          <td class="ss2">% от оружия</td>
        </tr>
        <tr>
          <td>Восстановление</td>
          <td>9</td>
          <td>9</td>
          <td>9</td>
          <td>9</td>
          <td>9</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Расход энергии</td>
          <td>50</td>
          <td>55</td>
          <td>60</td>
          <td>65</td>
          <td>70</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Урон</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td class="ss">80%</td>
          <td></td>
        </tr>
        <tr>
          <td>Длительность</td>
          <td>6</td>
          <td>6</td>
          <td>6</td>
          <td>6</td>
          <td>6</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Скорость атаки</td>
          <td>15%</td>
          <td>25%</td>
          <td>35%</td>
          <td>45%</td>
          <td>65%</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Скорость передвижения</td>
          <td>0.75</td>
          <td>0.8</td>
          <td>0.85</td>
          <td>0.9</td>
          <td>1</td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
  </section>
  <section id="content4">
    <img src="img/heroes/Ringo/hellfire-brew.png">
    <div class="updyn">Патч 2.5</div>
    <div>
      <div class="ch">Hellfire Brew (Адское пламя)</div>
      <div class="chl">C-Skill</div>
    </div>
    <div class="chcont">Ринго делает большой глоток из фляги и выдыхает в свою цель спепеляющий огненный шар. При столкновении шар взрывается и воспламеняет жертву, обжигая ее и находящихся рядом врагов на протяжении 7 сек.
      <table>
        <tr>
          <td>Характеристики</td>
          <td>LVL 1</td>
          <td>LVL 2</td>
          <td>LVL 3</td>
          <td class="ss">% от кристалла</td>
          <td class="ss2">% от оружия</td>
        </tr>
        <tr>
          <td>Восстановление</td>
          <td>100</td>
          <td>85</td>
          <td>70</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Расход энергии</td>
          <td>100</td>
          <td>115</td>
          <td>130</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Урон</td>
          <td>250</td>
          <td>365</td>
          <td>480</td>
          <td class="ss">75%</td>
          <td></td>
        </tr>
        <tr>
          <td>Урон от ожога</td>
          <td>30</td>
          <td>50</td>
          <td>70</td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
  </section>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.