Добавление изображения в столбец макета с гибкой сеткой (отзывчивый) искажает ширину на мобильных экранах

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

Проблема сохраняется даже тогда, когда я устанавливаю ширину контейнера изображения, скажем, на 50%. Изображение и его контейнер сжимаются, но div, содержащий контейнер изображения, по-прежнему расширяется за пределы ширины экрана. Если я установлю display:none; на изображении, или убрать его вообще, проблема исчезнет и ширина страницы будет соответствовать размеру экрана.

Спасибо!

Страница: http://cdhinternational.org/index3.html У меня проблемы с изображением на дно. (Режим адаптивного дизайна в Firefox — отличный способ воспроизвести проблему. Просто установите его на 320x480px.)


person mightimaus    schedule 02.10.2013    source источник
comment
На ваших страницах я не нашел адаптивной структуры. Как вы хотите сделать свою страницу адаптивной?   -  person Anirudha Gupta    schedule 02.10.2013
comment
Я использовал Dreamweaver, поэтому я не совсем уверен, что он сделал, но я думаю, что это response.min.js в /assets/js/.   -  person mightimaus    schedule 03.10.2013


Ответы (1)


Вам нужно установить ширину вашего содержимого-контейнера.

#content-container { width: 100%; } должен делать.

P.S. по какой-то конкретной причине контейнер с содержимым перемещается влево? Если вы удалите float: left; из контейнера содержимого, это также должно произойти.

person Sunny    schedule 02.10.2013
comment
Вау, я могу поклясться, что пробовал это... Но в любом случае установка ширины, кажется, исправила это! float:left; был помещен туда Dreamweaver, и по какой-то причине его удаление приводит к тому, что нижняя граница подскакивает вправо под верхней границей. Параметр ширины, вероятно, тоже был там изначально, но я удалил его, думая, что он не нужен. Спасибо! - person mightimaus; 03.10.2013
comment
На самом деле я только что понял, почему я удалил это. При ширине, установленной на 100%, граница выходила за пределы панели навигации. box-sizing:border-box; решил эту проблему. - person mightimaus; 03.10.2013