Вопросы Теги

Ячейка CSS с разделенной шириной 50% и фоновым изображением не умещается на экране

Вопросы о политике лучше всего получить, посмотрев Центр политики разработчиков Google Play , а не на StackOverflow. Этот, похоже, не очень хорошо освещен. Но в сообщениях электронной почты, отправленных для предупреждения разработчиков, указанных в новостях , в письмах говорится:

Службы, запрашивающие службы доступности, должны использоваться только для того, чтобы помочь пользователям с ограниченными возможностями использовать устройства Android и приложения.

blockquote>

и

Если вы этого еще не сделали, вы должны объяснить пользователям, как ваше приложение использует «android.permission.BIND_ACCESSIBILITY_SERVICE ', чтобы помочь пользователям с ограниченными возможностями использовать устройства и приложения Android. Приложения, которые не могут удовлетворить это требование в течение 30 дней, могут быть удалены из Google Play

blockquote>

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

Вы всегда можете связаться с консолью Google Play Console с помощью меню справки в Play Console, к которому обращается вопросительный знак «?» значок.

0
задан peonylast 19 January 2019 в 19:39
поделиться

2 ответа

Проблема в том, что .titlebox имеет свойство left: 20px, что приводит к появлению пробелов справа, когда его ширина составляет 50% от ширины страницы. Уменьшите его ширину или, если вам лень, добавьте следующий CSS, чтобы обойти эту проблему: 

body {
    overflow-x: hidden;
}
0
ответ дан spacer GIF 19 January 2019 в 19:39
поделиться

Вы используете span в качестве контейнера блочных элементов, что неверно. Вместо этого вам нужно использовать div и учитывать запас, чтобы создать пространство, а не корректировать положение, потому что вы просто создадите переполнение справа, если будете толкать элемент слева.

Также не забудьте удалить поля тела по умолчанию, если вы хотите охватить весь экран: 

body {
 margin:0;
}

.indexGridContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(250px, 450px);
}
.indexGridContainer > a {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.wallets {
  background-image: url(https://bellroy.imgix.net/cms_images/686/bellroy-brand-homepage-2.jpg?auto=format&fit=max);
}

.bags {
  background-image: url(https://bellroy.imgix.net/cms_images/691/bellroy-brand-homepage-7.jpg?auto=format&fit=max);
}

.keys {
  background-image: url(https://bellroy.imgix.net/cms_images/688/bellroy-brand-homepage-4.jpg?auto=format&fit=max);
}

.phonecases {
  background-image: url(https://bellroy.imgix.net/cms_images/690/bellroy-brand-homepage-6.jpg?auto=format&fit=max);
}

.titleBox {
  margin-left: 20px;
  padding: 20px;
}

.titleBox h1 {
  font-family: 'PT serif', 'serif';
  color: #f2f2f2;
}

.titleBox h3 {
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f2f2f2;
}
<div class="indexGridContainer">
  <a href="#" class="wallets">
    <div class="titleBox">
      <h1>Men's Wallets</h1>
      <h3>>SLIM YOUR WALLET</h3>
    </div>
  </a>
  <a href="#" class="keys">
    <div class="titleBox">
      <h1>Key Covers</h1>
      <h3>>STOP THE JANGLE</h3>
    </div>

  </a>
  <a href="#" class="bags">
    <div class="titleBox">
      <h1>Bags</h1>
      <h3>>Merge work and Play into one</h3>
    </div>

  </a>
  <a href="#" class="phonecases">
    <div class="titleBox">
      <h1>Phone Cases</h1>
      <h3>>Streamline your phone and wallet.</h3>
    </div>
  </a>

</div>

0
ответ дан Temani Afif 19 January 2019 в 19:39
поделиться