Неверная ширина мобильного контейнера против рабочего стола

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

Я добавил:

<meta name="viewport" content="width=device-width, initial-scale=1">

и искал почти любой «ширина» в CSS, но безрезультатно. Что еще мне не хватает?

Вот сайт:

http://leisurelandrvcenter.com/

конкретно "Inventory" страница:

http://leisurelandrvcenter.com/inventory/

- Отказ -

Это, кажется, только в том случае на некоторых устройств и только в портретном режиме. Пейзажный режим отлично работает на проверенных устройствах (только для Android). Спасибо заранее!

источник

2016-05-18 aarmfield

Если вы хотите сделать его отзывчивым, вам нужно избавиться от всей фиксированной ширины на css, например:

, если вы хотите сделать страницу инвентаризации отзывчивым вы должны отредактировать следующий CSS:

#layout-content { 
    width: 1285px; 
}

к этому:

#layout-content { 
    max-width: 1285px; 
    width: auto; 
}

Тогда для того, чтобы изменить размер изображения (п или пример логотип), вы должны установить следующий CSS:

img { max-width:100%; width:auto; }

Вместо того, чтобы использовать img тег, вы должны использовать класс CSS или ID логотип или любое изображение, которое вы хотите, чтобы реагировать.

источник

2016-05-18 09:22:05 Signo

Я изменил весь код, который вы указали, и он не исправил его. Я изменил все, что имело «1285px» (всего 5 предметов), чтобы получить максимальную ширину: 1285px, width: auto. Я не знаю, какие другие предметы нужно изменить. Должен ли я менять все ширины на «авто», даже если они 600 или что-то еще? Что касается "img", я нашел пару: '.mobile-view.widget-text img { \t высота: авто; \t max-width: 100%; \t ширина: авто; } ' Это нормально? – aarmfield

Хорошо, я получил мобильный сайт, работающий так, как нам нужно, но теперь версия для настольных компьютеров немного не работает. Вот что я сделал: Я добавил класс к каждому из изображений и присвоил их атрибутам: '\t max-width: 100%; \t ширина: авто; ' Мобильный сайт работает отлично, но теперь изображения на рабочем столе отключены по размеру. Некоторые из них меньше других, и эта страница выглядит странно. Любые идеи о том, что здесь изменить? – aarmfield

Кажется, что изображения, которые я связал, имеют разные размеры. После их изменения они немного улучшаются, но теперь я не могу заставить их выровнять. Я смотрел на код таблицы, и каждая таблица имеет другой размер. Я не могу найти, где этот размер хранится, поскольку некоторые из классов «widget-script widget» не находятся в файле css. Вы знаете, как я могу изменить размер всех таблиц, чтобы они были одного размера? – aarmfield

Изображения слишком большие для небольших экранов. Вы можете добавить медиа-запросы к вашему css, которые устанавливают ширину изображений на 100% для меньших экранов. (И вообще, используйте css для установки размеров img, вместо использования атрибутов img в html)

источник

2016-05-18 08:57:26 Erik

Не могли бы вы привести пример того, что я мог бы внести, что могло бы помочь мне здесь? Я знаю, что мне нужно «@media», но что после этого? – aarmfield

например: @media screen и (max-width: 800px) {img {width: 100%}} - Просто убедитесь, что вы берете атрибуты размера из html. Вы можете дать классы изображений для размеров и использовать mediaqueries для finetuning – Erik

Неверная ширина мобильного контейнера против рабочего стола

ответ

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