Проблема с <div>и <button>на более низких разрешениях - PullRequest
Новая
       8

Проблема с <div>и <button>на более низких разрешениях

0 голосов
/ 22 апреля 2020

Я делаю текстовую RPG, все работает нормально, но когда у меня много текста внутри кнопок, в более низких разрешениях (например, iphone 5, 5se), мои кнопки выталкиваются из коробки (div ).

Есть идеи?

HTML: 

<div class="container">
  <div id="text">Text</div>
  <div id="option-buttons" class="btn-grid">
    <button type="button" class="btn"> Option 1</button>
    <button type="button" class="btn"> Option 1</button>
    <button type="button" class="btn"> Option 1</button>
    <button type="button" class="btn"> Option 1</button>

  </div>
</div>

CSS: 

body {
  font-family: 'Roboto Mono', monospace;
  margin: 0;
  padding: 0;
  display:flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #474a56;
}

.container{
  border-radius: 10px;
  width: 950px;
  max-width: 80%;
  background-color: white;
  padding: 2%;
  box-shadow: 0 0 10px 2px;
  text-align: center;
}

.btn-grid{
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 18px;
  margin-top: 2rem;
}

.btn{
  font-family: 'Roboto mono', monospace;
  color: white;
  background-color: #474a56;
  border: 1px solid #d3d5fd;
  border-radius: 3.8px;
  padding: 10px 20px;
  outline: none;
  font-size: 1.1rem;
}

Ответы [ 2 ]

0 голосов
/ 22 апреля 2020

Удалить max-width из вашего .container класса. 

body {
  font-family: 'Roboto Mono', monospace;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #474a56;
}

.container {
  border-radius: 10px;
  width: 950px;
  background-color: white;
  padding: 2%;
  box-shadow: 0 0 10px 2px;
  text-align: center;
}

.btn-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 18px;
  margin-top: 2rem;
}

.btn {
  font-family: 'Roboto mono', monospace;
  color: white;
  background-color: #474a56;
  border: 1px solid #d3d5fd;
  border-radius: 3.8px;
  padding: 10px 20px;
  outline: none;
  font-size: 1.1rem;
}
<div class="container">
  <div id="text">Text</div>
  <div id="option-buttons" class="btn-grid">
    <button type="button" class="btn"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam et porro a fuga, totam, quidem quibusdam dolores iste illum ipsam quia autem alias error, eaque dicta numquam nulla debitis quis.</button>
    <button type="button" class="btn"> Option 1</button>
    <button type="button" class="btn"> Option 1</button>
    <button type="button" class="btn"> Option 1</button>

  </div>
</div>
0 голосов
/ 22 апреля 2020

Я предполагаю, что это проблема с размером шрифта: в этом случае мы можем использовать CSS медиа-запросов (которые могут динамически настраивать свойства на основе определенных факторов).

В вашем случае, мы можем сделать что-то вроде этого: 

@media only screen and (max-width: 720px) { /* Screens smaller than 720px */
    div, button {
        font-size: 0.7rem;
        padding: 5px;

        ...

        foo: bar;
    }
}

@media only screen and (max-width: 480px) {
    .foo {
        ...
    }

    #bar {
        ...
    }
}

(Обязательно поместите этот код внизу, от самого большого экрана к наименьшему, чтобы каскадное переопределение имело значение.)

Дополнительные примечания

Медиа-запросы эффективно действуют как контейнер для большего количества стилей, если выполняется условие. Мне нравится думать о нем как о встроенном теге HTML <style>.

Здесь - это W3 spe c, а здесь - некоторые W3schools примеры.

...