Как использовать дисплей: блок на RWD - PullRequest
Новая
       0

Как использовать дисплей: блок на RWD

0 голосов
/ 17 марта 2020

У меня следующий дизайн на рабочем столе здесь

Я хочу отображать эти элементы на дисплее: блок, когда разрешение мобильное, но оно не работает. 

.header {
  width: 100%;
  height: 700px;
  margin: auto;
  background-image: url("../ta3.jpg");
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: top right;
}

.header .header__center {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
  display: flex;
}

.header .header__center .header__bussword-row {
  width: 100%;
  height: auto;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 150px;
}

.header .header__center .header__bussword-row .bussword {
  font-size: 45px;
  color: #353535;
  font-weight: 800;
}

.header .header__center .skins-row {
  width: 100%;
  height: 200px;
  top: 264px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  margin-top: 320px;
}

.header .header__center .skins-row .ref-wrap {
  width: 130px;
  height: 200px;
  position: absolute;
  border: 1px solid #27d0d3;
  cursor: pointer;
}

.header .header__center .skins-row .ref-wrap:hover>.reflink-logo {
  transform: scale(120%);
  transition: .4s;
}

.header .header__center .skins-row .ref-wrap:before {
  content: '';
  position: absolute;
  background: #fff;
  width: 100%;
  height: 100%;
  opacity: .7;
}

.header .header__center .skins-row .ref-wrap .reflink-logo {
  max-width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: -30px;
  position: absolute;
}

.header .header__center .skins-row .ref-wrap .reflink-info {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  text-align: center;
}

.header .header__center .skins-row .ref-wrap .reflink-info .reflink__link a {
  text-decoration: none;
  font-weight: 400;
  color: #252525;
}

.header .header__center .skins-row .ref-wrap .reflink-info .reflink__code {
  padding-top: 7px;
}

.header .header__center .skins-row .ref-wrap .reflink-info .reflink__price {
  padding-top: 7px;
}

@media screen and (max-width: 400px) {
  .header {
    width: 100%;
    height: 900px;
    margin: auto;
    background-image: url("../ta3.jpg");
    background-size: 140%;
    background-repeat: no-repeat;
    background-position: top right;
  }
  .header .header__center .skins-row {
    margin-top: 20px;
  }
}
<body class="body light-theme">
  <section class="header col01">
    <div class="header__center">
      <div class="header__bussword-row">
        <h1 class="bussword">Dostępne reflinki</h1>
      </div>
      <div class="skins-row row02">
        <div class="ref-wrap wrap01">
          <img src="CrQS7tw.png" class="reflink-logo">
          <div class="reflink-info col-003">
            <p class="reflink__link">
              <a href="">g4skins.com</a>
            </p>
            <h5 class="reflink__code">Kod: xgleba</h5>
            <p class="reflink__price">Free 0.5$</p>
          </div>
        </div>
      </div>
      <div class="skins-row row02">
        <div class="ref-wrap wrap01">
          <img src="CrQS7tw.png" class="reflink-logo">
          <div class="reflink-info col-003">
            <p class="reflink__link">
              <a href="">g4skins.com</a>
            </p>
            <h5 class="reflink__code">Kod: xgleba</h5>
            <p class="reflink__price">Free 0.5$</p>
          </div>
        </div>
      </div>
      <div class="skins-row row02">
        <div class="ref-wrap wrap01">
          <img src="CrQS7tw.png" class="reflink-logo">
          <div class="reflink-info col-003">
            <p class="reflink__link">
              <a href="">g4skins.com</a>
            </p>
            <h5 class="reflink__code">Kod: xgleba</h5>
            <p class="reflink__price">Free 0.5$</p>
          </div>
        </div>
      </div>
      <div class="skins-row row02">
        <div class="ref-wrap wrap01">
          <img src="CrQS7tw.png" class="reflink-logo">
          <div class="reflink-info col-003">
            <p class="reflink__link">
              <a href="">g4skins.com</a>
            </p>
            <h5 class="reflink__code">Kod: xgleba</h5>
            <p class="reflink__price">Free 0.5$</p>
          </div>
        </div>
      </div>
      <div class="skins-row row02">
        <div class="ref-wrap wrap01">
          <img src="CrQS7tw.png" class="reflink-logo">
          <div class="reflink-info col-003">
            <p class="reflink__link">
              <a href="">g4skins.com</a>
            </p>
            <h5 class="reflink__code">Kod: xgleba</h5>
            <p class="reflink__price">Free 0.5$</p>
          </div>
        </div>
      </div>

Я пытался добавить display: block в класс skins-row , но он все еще не работает.

1 Ответ

0 голосов
/ 17 марта 2020

Существует некоторая стилизация, которую я не получаю, и ненужная высокая специфичность для селекторов, но я предполагаю, что ваш вопрос касается размещения .skins-row -элементов на узких окнах просмотра, верно? Вам также придется изменить свойство display родительского элемента (.header .header__center), чтобы увидеть эффект, поскольку он настроен на использование flex-box. 

.header {
  width: 100%;
  height: 700px;
  margin: auto;
  background-image: url("../ta3.jpg");
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: top right;
}

.header .header__center {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
  display: flex;
}

.header .header__center .header__bussword-row {
  width: 100%;
  height: auto;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 150px;
}

.header .header__center .header__bussword-row .bussword {
  font-size: 45px;
  color: #353535;
  font-weight: 800;
}

.header .header__center .skins-row {
  width: 100%;
  height: 200px;
  top: 264px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  margin-top: 320px;
}

.header .header__center .skins-row .ref-wrap {
  width: 130px;
  height: 200px;
  position: absolute;
  border: 1px solid #27d0d3;
  cursor: pointer;
}

.header .header__center .skins-row .ref-wrap:hover>.reflink-logo {
  transform: scale(120%);
  transition: .4s;
}

.header .header__center .skins-row .ref-wrap:before {
  content: '';
  position: absolute;
  background: #fff;
  width: 100%;
  height: 100%;
  opacity: .7;
}

.header .header__center .skins-row .ref-wrap .reflink-logo {
  max-width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  top: -30px;
  position: absolute;
}

.header .header__center .skins-row .ref-wrap .reflink-info {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  text-align: center;
}

.header .header__center .skins-row .ref-wrap .reflink-info .reflink__link a {
  text-decoration: none;
  font-weight: 400;
  color: #252525;
}

.header .header__center .skins-row .ref-wrap .reflink-info .reflink__code {
  padding-top: 7px;
}

.header .header__center .skins-row .ref-wrap .reflink-info .reflink__price {
  padding-top: 7px;
}

@media screen and (max-width: 400px) {
  .header {
    width: 100%;
    height: 900px;
    margin: auto;
    background-image: url("../ta3.jpg");
    background-size: 140%;
    background-repeat: no-repeat;
    background-position: top right;
  }
  .header .header__center .skins-row {
    margin-top: 20px;
  }
}

/* added */

@media screen and (max-width: 400px) {
  .header .header__center {
    display: block;
    background-color: rgba(0, 0, 255, 0.5);
  }
  .header .header__center .skins-row {
    display: block;
    background-color: rgba(0, 255, 0, 0.5);
  }
}
<body class="body light-theme">
  <section class="header col01">
    <div class="header__center">
      <div class="header__bussword-row">
        <h1 class="bussword">Dostępne reflinki</h1>
      </div>
      <div class="skins-row row02">
        <div class="ref-wrap wrap01">
          <img src="CrQS7tw.png" class="reflink-logo">
          <div class="reflink-info col-003">
            <p class="reflink__link">
              <a href="">g4skins.com</a>
            </p>
            <h5 class="reflink__code">Kod: xgleba</h5>
            <p class="reflink__price">Free 0.5$</p>
          </div>
        </div>
      </div>
      <div class="skins-row row02">
        <div class="ref-wrap wrap01">
          <img src="CrQS7tw.png" class="reflink-logo">
          <div class="reflink-info col-003">
            <p class="reflink__link">
              <a href="">g4skins.com</a>
            </p>
            <h5 class="reflink__code">Kod: xgleba</h5>
            <p class="reflink__price">Free 0.5$</p>
          </div>
        </div>
      </div>
      <div class="skins-row row02">
        <div class="ref-wrap wrap01">
          <img src="CrQS7tw.png" class="reflink-logo">
          <div class="reflink-info col-003">
            <p class="reflink__link">
              <a href="">g4skins.com</a>
            </p>
            <h5 class="reflink__code">Kod: xgleba</h5>
            <p class="reflink__price">Free 0.5$</p>
          </div>
        </div>
      </div>
      <div class="skins-row row02">
        <div class="ref-wrap wrap01">
          <img src="CrQS7tw.png" class="reflink-logo">
          <div class="reflink-info col-003">
            <p class="reflink__link">
              <a href="">g4skins.com</a>
            </p>
            <h5 class="reflink__code">Kod: xgleba</h5>
            <p class="reflink__price">Free 0.5$</p>
          </div>
        </div>
      </div>
      <div class="skins-row row02">
        <div class="ref-wrap wrap01">
          <img src="CrQS7tw.png" class="reflink-logo">
          <div class="reflink-info col-003">
            <p class="reflink__link">
              <a href="">g4skins.com</a>
            </p>
            <h5 class="reflink__code">Kod: xgleba</h5>
            <p class="reflink__price">Free 0.5$</p>
          </div>
        </div>
      </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...