Мобильный вид для раздела выглядит странно

У меня возникли проблемы с поиском проблемы с размещением мобильного вида. Когда я просматриваю свой сайт с помощью мобильного телефона, раздел сокращается соответственно, а не отображается изображение полной ширины и укладывается в стек. Как исправить это, чтобы окна сидели друг над другом при просмотре через мобильный? Я использую Bootstrap.Мобильный вид для раздела выглядит странно

<section class="health" id="health"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="section-title st-center"> 
          <h3>Places to exercise</h3> 
         </div> 
         <div class="grid"> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2><span>EAST COAST PARK</span></h2> 
            <p>Long stretch of running and cycling/skating paths, it’s one of Singapore’s best spots to go jogging or bike riding.</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
         </div> 
        </div> 
       </div> 
      </div> 
     </section>

источник

2016-05-10 xtjnrchris

.health {padding: 2em; } .grid figure { позиция: относительная; float: слева; переполнение: скрыто; text-align: center; курсор: указатель; ширина: 33.33333333%; } .grid figure img { позиция: относительная; дисплей: блок; мин-высота: 100%; max-width: 100%; непрозрачность: 1; -webkit-переход: непрозрачность 0.3s, -webkit-transform 0.3s кубический-безье (0.645, 0.045, 0.355, 1); переход: непрозрачность 0,3 с, преобразование 0,3 с кубического безье (0,645, 0,045, 0,355, 1); } – xtjnrchris

Eer, спасибо за включение вашего CSS, но, пожалуйста, добавьте его в фактический текст вопроса, а не как комментарий - некоторые люди не будут читать это далеко, а комментарии могут быть потеряны очень легко. – Serlite

Это может быть, что вы дали цифру или любой другой элемент картина вложен в фиксированном hieght, вы можете исправить в CSS, что с height: auto;

источник

2016-05-10 15:00:21 Simon

Привет, я использовал 100% для максимальной высоты. Изменил его на авто, но по-прежнему показывает ту же ошибку. .grid figure { позиция: относительная; float: слева; переполнение: скрыто; text-align: center; курсор: указатель; ширина: 33.33333333%; } .grid figure img { позиция: относительная; дисплей: блок; мин-высота: 100%; max-width: 100%; } – xtjnrchris

лучший способ сделать это - посмотреть на добавление col-span к каждому из изображений, например, используя col-span-4 на трех изображениях, позволяя им красиво складываться друг против друга на рабочем столе, но затем в мобильном режиме они будут будут автоматически падать друг под друга из-за значения по умолчанию css

  <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="#"> 
       <img class="img-responsive" src="assets/img/gallery/1.jpg" alt=""> 
      </a> 
     </div> 
     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="#"> 
       <img class="img-responsive" src="assets/img/gallery/2.jpg" alt=""> 
      </a> 
     </div> 
     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="#"> 
       <img class="img-responsive" src="assets/img/gallery/3.jpg" alt=""> 
      </a> 
     </div> 
     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="#"> 
       <img class="img-responsive" src="assets/img/gallery/4.jpg" alt=""> 
      </a> 
     </div>

источник

2016-05-10 15:01:20 Phil

Мобильный вид для раздела выглядит странно

ответ

Смежные вопросы