Загадочное отступы слева направо на устройстве шириной 320 пикселей

Я использую бутстрап для создания сетки col. На рабочем столе и в таблице это работает отлично, но в xs-size (особенно на 320px ширине устройства, например iPhone 5) он показывает space с правой стороны, и я не знаю, почему. Вы можете увидеть в прямом эфире здесь. Снимок можно увидеть и здесь, посмотрите на пространство правой стороны:

Как я могу это исправить? Я попытался изменить размер текста шрифта, но это не сработало.

  <div class = "container content-parent">
        <div class = "col-lg-12 mx-auto">
            <div class = "fila-animada">
  <div class = "row icons-info">
    <div class = "col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
       <div class = "container mt-3 pb-5 pt-5">
            <!-- Card Flip -->
                <div class = "card-flip">
                    <div class = "flip">
                        <div class = "front">
                            <!-- front content -->
                            <div class = "card">
                                <div class = "card-block">
                                        <img src = "img/Icono%20Casa-04.png" />
            <h2>ABIERTO 24/7</h2>
                        </div>
                        </div>
                        </div>
                        <div class = "back">
                            <!-- back content -->
                            <div class = "card">
                              <div class = "card-block">
                                <p>Con seguridad las 24 horas y equipo humano a tu disposición.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->
    </div>
    </div>
    <div class = "col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
      <div class = "container  mt-3 mb-2 pb-5 pt-5">
            <!-- Card Flip -->
                <div class = "card-flip">
                    <div class = "flip">
                        <div class = "front">
                            <!-- front content -->
                            <div class = "card">
                                <div class = "card-block">
                                        <img src = "img/Icono%20Wifi-04.png" />
            <h2>FREE WI-FI</h2>
                        </div>
                        </div>
                        </div>
                        <div class = "back">
                            <!-- back content -->
                            <div class = "card">
                              <div class = "card-block">
                                <p>Conectividad permanente en todas las instalaciones.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->
    </div>
  </div>
    <div class = "col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
      <div class = "container  mt-3 mb-2 pb-5 pt-5">
            <!-- Card Flip -->
                <div class = "card-flip">
                    <div class = "flip">
                        <div class = "front">
                            <!-- front content -->
                            <div class = "card">
                                <div class = "card-block">
                                        <img src = "img/Icono-Silla%20ruedas-03.png" />
            <h2>ACCESIBILIDAD</h2>
                        </div>
                        </div>
                        </div>
                        <div class = "back">
                            <!-- back content -->
                            <div class = "card">
                              <div class = "card-block">
                                <p>Disponemos de zonas adaptadas y trabajamos en próximas mejoras.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->
    </div>
  </div>

         <div class = "col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">

                  <div class = "container mt-3 mb-2 pb-5 pt-5">            
            <!-- Card Flip -->
                <div class = "card-flip">
                    <div class = "flip">
                        <div class = "front">
                            <!-- front content -->
                            <div class = "card">
                                <div class = "card-block">
                                        <img src = "img/Icono-Piscina.png" />
            <h2>PISCINA</h2>
                        </div>
                        </div>
                        </div>
                        <div class = "back">
                            <!-- back content -->
                            <div class = "card">
                              <div class = "card-block">
                                <p>Para disfrutar con los amigos o simplemente para relajarse o hacer deporte.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->  
      </div>
    </div>
  </div>
            </div>
        <div class = "fila-animada">
    <div class = "row icons-info">
    <div class = "col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
       <div class = "container mb-3 pb-5 pt-5">           
                                <!-- Card Flip -->
                <div class = "card-flip">
                    <div class = "flip">
                        <div class = "front">
                            <!-- front content -->
                            <div class = "card">
                                <div class = "card-block">
                                        <img src = "img/Icono%20Libro-04.png" />
            <h2>BIBLIOTECA</h2>
                        </div>
                        </div>
                        </div>
                        <div class = "back">
                            <!-- back content -->
                            <div class = "card">
                              <div class = "card-block">
                                <p>Zona de estudio amplia y silenciosa donde estudiar, trabajar o hacer consultas.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->  
    </div>
    </div>
    <div class = "col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
                 <div class = "container mb-3 pb-5 pt-5">           
                                <!-- Card Flip -->
                <div class = "card-flip">
                    <div class = "flip">
                        <div class = "front">
                            <!-- front content -->
                            <div class = "card">
                                <div class = "card-block">
                                        <img src = "img/Icono%20Comedor-04.png" />
            <h2>COMEDOR</h2>
                        </div>
                        </div>
                        </div>
                        <div class = "back">
                            <!-- back content -->
                            <div class = "card">
                              <div class = "card-block">
                                <p>Gran zona común para disfrutar del desayuno, comida o cena.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->    
    </div>
  </div>
     <div class = "col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
                 <div class = "container mb-3 pb-5 pt-5">           
                                <!-- Card Flip -->
                <div class = "card-flip">
                    <div class = "flip">
                        <div class = "front">
                            <!-- front content -->
                            <div class = "card">
                                <div class = "card-block">
                                        <img src = "img/SALON-DE-ACTOS-03.png" />
            <h2>SALÓN DE ACTOS</h2>
                        </div>
                        </div>
                        </div>
                        <div class = "back">
                            <!-- back content -->
                            <div class = "card">
                              <div class = "card-block">
                                <p>Estancia destinada a eventos culturales y formativos, dónde puedes ser el protagonista.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->   
    </div>
  </div>
    <div class = "col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
                 <div class = "container mb-3 pb-5 pt-5">           
                                <!-- Card Flip -->
                <div class = "card-flip">
                    <div class = "flip">
                        <div class = "front">
                            <!-- front content -->
                            <div class = "card">
                                <div class = "card-block">
                                        <img src = "img/SALA-MULTIMEDIA-03.png" />
            <h2>SALA MULTIMEDIA</h2>
                        </div>
                        </div>
                        </div>
                        <div class = "back">
                            <!-- back content -->
                            <div class = "card">
                              <div class = "card-block">
                                <p>Espacio que permite jugar con la videoconsola, juegos de mesa, usar el karaoke o ver la TV.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->  
      </div>
    </div>
  </div>
            </div>
        <div class = "fila-animada">
   <div class = "row icons-info">
      <div class = "col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
      <div class = "container mb-3 pb-5 pt-5">
            <!-- Card Flip -->
                <div class = "card-flip">
                    <div class = "flip">
                        <div class = "front">
                            <!-- front content -->
                            <div class = "card">
                                <div class = "card-block">
                                        <img src = "img/Icono%20Gym-04.png" />
            <h2>GIMNASIO</h2>
                        </div>
                        </div>
                        </div>
                        <div class = "back">
                            <!-- back content -->
                            <div class = "card">
                              <div class = "card-block">
                                <p>Recinto con todas las manquinarias e instalaciones necesarias para la actividad física.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->      
                </div>
    </div>
    <div class = "col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
                 <div class = "container mb-3 pb-5 pt-5">           
                                <!-- Card Flip -->
                <div class = "card-flip">
                    <div class = "flip">
                        <div class = "front">
                            <!-- front content -->
                            <div class = "card">
                                <div class = "card-block">
                                        <img src = "img/LAVANDERIA-03.png" />
            <h2>LAVANDERÍA</h2>
                        </div>
                        </div>
                        </div>
                        <div class = "back">
                            <!-- back content -->
                            <div class = "card">
                              <div class = "card-block">
                                <p>Zona completamente reformada para el lavado y secado de la ropa.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->   
    </div>
  </div>
    <div class = "col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">        
                               <div class = "container mb-3 pb-5 pt-5"> 
                                        <!-- Card Flip -->
                <div class = "card-flip">
                    <div class = "flip">
                        <div class = "front">
                            <!-- front content -->
                            <div class = "card">
                                <div class = "card-block">
                                        <img src = "img/chill.png" />
            <h2>CHILL OUT</h2>
                        </div>
                        </div>
                        </div>
                        <div class = "back">
                            <!-- back content -->
                            <div class = "card">
                              <div class = "card-block">
                                <p>Zonas ajardinadas y de chill out para encontrar la relajación y diversión que llevas dentro.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->  
    </div>
    </div>
   <div class = "col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
                 <div class = "container mb-3 pb-5 pt-5">           
                                <!-- Card Flip -->
                <div class = "card-flip">
                    <div class = "flip">
                        <div class = "front">
                            <!-- front content -->
                            <div class = "card">
                                <div class = "card-block">
                                        <img src = "img/Icono%20Comunidad-04.png" />
            <h2>COMUNIDAD</h2>
                        </div>
                        </div>
                        </div>
                        <div class = "back">
                            <!-- back content -->
                            <div class = "card">
                              <div class = "card-block">
                                <p>Estilo de vida  basados en los valores del #WeAreRucab.</p>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
                <!-- End Card Flip -->    
      </div>
    </div>
   </div>
</div>

</div>

        </div>
      </div>
    </div>

Попробуйте превратить это в MCVE. Это поможет людям, пытающимся помочь вам, и вы можете найти решение в процессе.

— 08.04.2019 01:13

@Nate В вопросе я сказал, что пытался уменьшить размер шрифта, но это не сработало, извините :(

— 08.04.2019 01:45

Я вижу это сейчас. Извиняюсь

— 08.04.2019 01:48

html css twitter-bootstrap

08.04.2019 01:02

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

172

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в размере шрифта на карточке. На «обратной» стороне карточки текст слишком длинный, и это заставляет вас прокручивать его по горизонтали, даже если вы не видите содержимого. Кроме того, на «лицевой» стороне карточки есть обтекание текстом в неудобных местах, потому что экран недостаточно широк, чтобы отобразить полное слово с таким размером шрифта. Я бы добавил следующий CSS в медиа-запрос, предназначенный для этих небольших экранов (не совсем уверен, когда вам следует уменьшить размер).

// Prevent the card back from creating a scroll bar
.card-flip .back .card-block p {
  font-size: 13px; 
}

// Lower the font size because the text wraps in a single word
#rucab .card-flip .front .card-block h2 {
  font-size: 20px; 
}

Чтобы отлаживать такие вещи, я открываю свой инспектор в браузере и просто нажимаю клавишу Delete на div, пока проблема не исчезнет. Затем, как только я нахожу тот, который «решил» проблему, я начинаю просматривать содержимое этого контейнера, чтобы выяснить, что происходит не так. Я повторяю этот процесс для дочерних элементов внутри проблемного блока, пока не смогу отследить проблему.

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

Да, это была проблема, размер шрифта обратной карты p. Итак, что вам нравится больше? 2 или 1 колонка для мобильного? Спасибо.

— 08.04.2019 02:41

Я лично предпочитаю вашу идею с 1 колонкой. Я думаю, что это легче читать и выглядит красивее.

— 08.04.2019 02:42

08.04.2019 01:56