Добавление изображения в жидкокристаллическую (адаптивную) колонку макета приводит к беспорядку на мобильных экранах

Question

Добавление изображения в жидкокристаллическую (адаптивную) колонку макета приводит к беспорядку на мобильных экранах

0

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

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

Благодарю!

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

mightimaus 02 окт. 2013, в 05:53

Источник

0

Я не нашел никаких адаптивных рамок на ваших страницах. Как вы хотите, чтобы ваша страница была адаптивной?
Anirudha Gupta 02 окт. 2013, в 03:25
0

Я использовал Dreamweaver, поэтому я не совсем уверен, что он сделал, но я думаю, что это response.min.js в / assets / js /.
mightimaus 03 окт. 2013, в 05:22

Теги:

html

css

responsive-design

1 ответ

Ещё вопросы

Я не нашел никаких адаптивных рамок на ваших страницах. Как вы хотите, чтобы ваша страница была адаптивной?
Я использовал Dreamweaver, поэтому я не совсем уверен, что он сделал, но я думаю, что это response.min.js в / assets / js /.

Sunny · Accepted Answer · 2013-10-02T02-29-00.000Z

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

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

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

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