Отзывчивый дизайн сломанный

Question

Я делаю сайт с бутстрапом. Получил элемент из темы и использовал ее. Элемент представляет собой изображение слева и текст справа. Это также масштабируется прямо на планшете и мобильном телефоне. Теперь я изменил элемент на текст слева и картинку справа. Но с этой частью отзывчивый дизайн больше не работает. Не могу понять, почему. Это гиперссылка click

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

Answer 1

Так что я думаю, что это очень хороший веб-страница. И я понимаю, почему этот пример не вписывается в JSfiddle в чистоту и не может быть легко перенесен в минимальный пример.

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

<style type="text/css"> 
    .no-padding.img-2 { 
     background: url(http://fakeimg.pl/300/) scroll center no-repeat; 
     background-size: cover; 
     position: absolute; 
     height: 100%; 
    } 

    .no-padding.img-3 { 
     background: url(http://fakeimg.pl/300/) scroll center no-repeat; 
     background-size: cover; 
     height: 560px; 
    } 
</style> 

Image-2 ваше изображение толкнуло левую реализацию, изображение-3 Ваше изображение толкнуло правую реализацию. У них определенно нет одинакового CSS ... И я думаю, что одна и та же проблема связана с вашим соответствующим текстовым блоком. Position: Absolute, Height:100% против фиксированной высоты пикселей приведет к нечетному выходу.

Я также не понимаю, выбора классов между левыми/правыми элементами:

<div class="col-sm-6 no-padding img-2 ">

против

<div class="col-sm-6 col-sm-offset-6 no-padding gray">

Почему .col-sm-offset-6 даже там вообще? Reference here. Класс .col-sm-offset-X заставляет вещи перейти на смещение, в этом случае он подталкивает элемент в правую сторону экрана, НО если у вас есть хотя бы одна проблема с шириной пикселя, тогда он всплывает над элементом и вниз, и это может стать уродливым. Почему бы просто не позволить всему плавать?

Короткий ответ.

Потерять .col-sm-offset-6 Очистить CSS для изображений (потерять position: absolute) Прекрасно работает в моем браузере.

Редактировать. Уч. Я не видел комментарий от @AndyHolmes до сих пор. Я был занят тестированием и написанием этого ответа. Похоже, он избил меня на одну минуту.

Answer 2

Я думаю, что принятый ответ, к сожалению, не идентифицирует настоящую проблему с вашим макетом и не вводит даже более серьезные проблемы, как необходимость ручной настройки heights контейнеров изображений.

(я реплицируются оригинальный вопрос в this JSFiddle)

Ваша проблема может быть сведена к вопросу создания равных высот на двух соседних столбцах плавали. Это своего рода хорошо известная проблема в мире дизайна, и эта тема решается в this post Крисом Койером.

Я догадываюсь, что вы можете принять несколько иной подход к этой проблеме. Сначала перейдя с мобильным телефоном, вы можете упростить свою жизнь и уменьшить количество кода. Сначала вы создаете базовый 1 столбец, и единственное, что вам нужно принять здесь, - это height ваших контейнеров изображений.
Поскольку это 1 колонка, лучше всего исправить height изображений здесь, так как они не зависят от height соседних столбцов.

Чтобы увеличить размер вашего окна просмотра, вы будете использовать медиа-запросы, чтобы настроить точку останова, где 1 макет столбца становится 2-мя макетами столбцов, причем оба столбца установлены рядом друг с другом. Теперь это тот момент, когда вы столкнулись с проблемой столбцов одинаковой высоты. С одной стороны, вы хотите, чтобы ваш контейнер background image увеличивался вертикально так же, как и содержимое другого столбца.

Это то, где flexbox приходит на помощь, если вы только хотите его использовать. То, что он делает, равномерно равно обеим высотам столбцов, что избавляет вас от настройки каждого контейнера изображений heights вручную, и это здорово, я думаю. Вы получаете гибкий, гибкий и мобильный план с минимальным количеством кода (и никакой зависимости от бутстрапа, который всегда является бонусом, на мой взгляд), который может соответствовать любому количеству контента.

Я упростил и воспроизвел желаемый макет в этом минимальном JSFiddle, так что не стесняйтесь приспосабливать его к вашим потребностям.

.row { 
 
    display: block; 
 
    overflow:hidden; 
 
    background: #f0f0f0; 
 
    width:100%; 
 
    margin-bottom:10px; 
 
} 
 
.bgImg, 
 
.text { 
 
    width:100%; 
 
} 
 
.bgImg { 
 
    background: url("http://placehold.it/350x150") no-repeat center center; 
 
    background-size: cover; 
 
    height: 150px; 
 
} 
 
h4 { 
 
    margin-top:0; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .row { 
 
    display:flex; 
 
    } 
 
    .bgImg, 
 
    .text { 
 
    width:50%; 
 
    float:left; 
 
    } 
 
    .bgImg { 
 
    height: initial; 
 
    } 
 
}

<section class="row"> 
 
    <div class="bgImg"></div> 
 
    <article class="text"> 
 
    <h4>Blah</h4> 
 
    <p>Some nonsense</p> 
 
    </article> 
 
</section> 
 
<section class="row"> 
 
    <article class="text"> 
 
    <h4>Blah</h4> 
 
    <p>Some nonsense</p> 
 
    <p>Some nonsense</p> 
 
    <p>Some nonsense</p> 
 
    <p>Some nonsense</p> 
 
    <p>Some nonsense</p> 
 
    <p>Some nonsense</p> 
 
    </article> 
 
    <div class="bgImg"> </div> 
 
</section> 
 
<section class="row"> 
 
    <div class="bgImg"></div> 
 
    <article class="text"> 
 
    <h4>Blah</h4> 
 
    <p>Some nonsense</p> 
 
    <p>Some nonsense</p> 
 
    <p>Some nonsense</p> 
 
    </article> 
 
</section>