импорт font-awesome вызывает переполнение по оси X в Chrome Mobile

У меня тут довольно странная ситуация. У меня есть этот HTML:

<!DOCTYPE html>
<html>
   <head>
      <title>Notes</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
      <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
      <link rel="stylesheet" href="index.css">
   </head>
   <body>
      <div class="columns is-multiline">
         <div class="column is-one-third">
            <div class="card">
               <header class="card-header">
                  <p class="card-header-title">
                     test1
                  </p>
                  <a href="/notes/pin/1" class="card-header-icon" aria-label="more options">
                  <span class="icon">
                  <i class="fas fa-thumbtack" aria-hidden="true"></i>
                  </span>
                  </a>
               </header>
               <div class="card-content">
                  <div class="content">
                     <p>testtt</p>
                  </div>
               </div>
               <footer class="card-footer">
                  <a href="/notes/edit/1/" class="card-footer-item">Edit/View</a>
                  <a href="/notes/delete/1/" class="card-footer-item">Delete</a>
               </footer>
            </div>
         </div>
         <div class="column is-one-third">
            <div class="card">
               <header class="card-header">
                  <p class="card-header-title">
                     Note test
                  </p>
                  <a href="/notes/pin/4" class="card-header-icon" aria-label="more options">
                  <span class="icon">
                  <i class="fas fa-thumbtack" aria-hidden="true"></i>
                  </span>
                  </a>
               </header>
               <div class="card-content">
                  <div class="content">
                     <p>- test</p>
                  </div>
               </div>
               <footer class="card-footer">
                  <a href="/notes/edit/4/" class="card-footer-item">Edit/View</a>
                  <a href="/notes/delete/4/" class="card-footer-item">Delete</a>
               </footer>
            </div>
         </div>
      </div>
      <div style="padding-top:50px;"></div>
      <!--- NON-PINNED -->
      <div class="columns is-multiline">
         <div class="column is-one-third">
            <div class="card">
               <header class="card-header">
                  <p class="card-header-title">
                     Note test
                  </p>
                  <a href="/notes/pin/2" class="card-header-icon" aria-label="more options">
                  <span class="icon">
                  <i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
                  </span>
                  </a>
               </header>
               <div class="card-content">
                  <div class="content">
                     <p>Testi</p>
                  </div>
               </div>
               <footer class="card-footer">
                  <a href="/notes/edit/2/" class="card-footer-item">Edit/View</a>
                  <a href="/notes/delete/2/" class="card-footer-item">Delete</a>
               </footer>
            </div>
         </div>
         <div class="column is-one-third">
            <div class="card">
               <header class="card-header">
                  <p class="card-header-title">
                     Dhchjc
                  </p>
                  <a href="/notes/pin/3" class="card-header-icon" aria-label="more options">
                  <span class="icon">
                  <i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
                  </span>
                  </a>
               </header>
               <div class="card-content">
                  <div class="content">
                     <p>Djfjgn<br>- eat ????</p>
                  </div>
               </div>
               <footer class="card-footer">
                  <a href="/notes/edit/3/" class="card-footer-item">Edit/View</a>
                  <a href="/notes/delete/3/" class="card-footer-item">Delete</a>
               </footer>
            </div>
         </div>
         <div class="column is-one-third">
            <div class="card">
               <header class="card-header">
                  <p class="card-header-title">
                     Fhfj
                  </p>
                  <a href="/notes/pin/5" class="card-header-icon" aria-label="more options">
                  <span class="icon">
                  <i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
                  </span>
                  </a>
               </header>
               <div class="card-content">
                  <div class="content">
                     <p>Brjdjc</p>
                  </div>
               </div>
               <footer class="card-footer">
                  <a href="/notes/edit/5/" class="card-footer-item">Edit/View</a>
                  <a href="/notes/delete/5/" class="card-footer-item">Delete</a>
               </footer>
            </div>
         </div>
      </div>
      <a href="/notes/new/">
         <div id="floating-button" data-toggle="tooltip" data-placement="left" data-original-title="Create">
            <p class="plus">+</p>
         </div>
      </a>
   </body>
</html>

И мой CSS:

#floating-button {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #db4437;
    position: fixed;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
    box-shadow: 0px 2px 5px #666;
}

.plus {
    color: white;
    position: absolute;
    top: 0;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0;
    margin: 0;
    line-height: 55px;
    font-size: 38px;
    font-family: 'Roboto';
    font-weight: 300;
}

.column {
    margin-top: 10px;
}

.card {
    margin-left: 10px;
    margin-right: 10px;
    max-height: 500px;
}

При просмотре в обычном режиме рабочего стола все нормально.
В браузере Chrome + для мобильных устройств наблюдается небольшое переполнение по оси x.
При просмотре в Firefox + мобильное окно просмотра все в порядке.
При удалении тега script при импорте Font-Awesome в Chrome больше не возникает проблем. К этому же приводит CSS CDN с великолепными шрифтами.

Есть два columns, потому что один для закрепленных заметок (отображается первым), а другой для обычных.

Проблема

В Chrome с мобильным окном просмотра ширина страницы больше, чем окно просмотра, но не в Firefox. Я исправил это, удалив тег script, импортирующий Font-Awesome, но мне нужен был потрясающий шрифт и его значки.

W. Reyna 14.12.2018 источник

comment

Пожалуйста, в чем проблема? Быть конкретной. - Yoarthur 15.12.2018

comment

@Yoarthur Отредактировано - W. Reyna 15.12.2018

comment

В первом .columns multiline вы определяете только два .is-one-third. Должны ли вы определить три, чтобы bulma мог знать ширину столбцов, которые он будет охватывать?. - Yoarthur 15.12.2018

comment

Я хочу иметь 3 карты в ряду. Я добавил многострочный, чтобы он занимал несколько строк. Также эти карты генерируются динамически - так что в первом columns может быть 3 или 20 карт. Я новичок в HTML, поэтому надеюсь, что делаю это правильно - W. Reyna 15.12.2018

Ответы (1)

arrow_upward
1
arrow_downward

Я исправил это, добавив .columns { margin-right:0px;margin-left:0px;} в CSS. См. эту проблему bulma.

W. Reyna 17.12.2018

импорт font-awesome вызывает переполнение по оси X в Chrome Mobile

Проблема

Ответы (1)

Вопросы по теме