@RoadMoscow

Почему не адаптируется сайт на bootstap 3?

Здравствуйте. Есть сайт который давно нам верстали на bootstrap. Подскажите пожалуйста почему в рарешении 320px он не адаптируется и не увеличивается как-то по экрану.

Проставили
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


Но там вроде был изменен файл bootstrap мы подключили другой с офф сайта.

Посмотрите и подскажите пожалуйста))
  • Вопрос задан
  • 116 просмотров
Пригласить эксперта
Ответы на вопрос 5
coll3ctor
@coll3ctor
Указанный вами тег для viewport вполне дефолтный корректный и на то, чтобы ваш макет "складывался" влиять не должен.

Судя по коду вёрстки, ваш сайт и не должен адаптироваться. Там просто нет необходимого "функционала".
Вы используете только классы типа col-xs-12, которые не покрывают весь спектр разрешений (см. тут), из всего, что есть, у вас только col-xs-12 на главной.
Возможно, сайт никогда и не складывался и его текущий вид такой - да и всё на этом ?
Ответ написан
bootd
@bootd
Гугли и ты откроешь врата знаний!
а почему, если бутстрап, то сайт обязан адаптироваться? Смешное утрверждение. У сайта задана минимальная фиксированная ширина. Её можно увидеть, если уменьшать сайт в браузере. У вас появится полоса прокрутки внизу
Ответ написан
blood-moon
@blood-moon
Маленький фрилансер
Ещё я бы посоветовал вам переверстать гамбургер . Он нажимается только если жать именно на span но как мне кажется это не правильно .

А вот тут вообще что-то лютое prntscr.com/i7j6ly
Ответ написан
@weranda
На сайте у некоторых элементов задана фиксированная ширина и минимальная ширина — "неадаптивное в адаптивном". Вот пример:
5a7029463286a493769895.png
Ответ написан
aixman
@aixman
Разарботичк сайтов с 8летним опытом жизни в WEB'е
Добрый день.

как посмотреть, что можно изменить для корректного отображения
при просмотре в firefox (в режиме мобильного - для этого нажмите CTRL+SHIFT+M)
видно как сайт отображается на смартфонах с разрешением в 320px
чтобы узнать причину, почему тот или иной блок "не складывается" в мобильном нажмите на блок правой кнопкой мыши и выберите "исследовать элемент".

В появившемся инструментарии разработчика вы увидите, как ведет себя элемент верстки в данном разрешении. И так же увидите в каком файле css и на какой строке требуется внести изменения.
В этом же редакторе вы можете поиграться и изменять параметры без изменения CSS файлов (некая песочница), чтобы понять: к чему приведут изменения.

например элемент BODY обладает стилями на разрешении 320 (как показывает FireFox эти стили находятся в файле roadto.alfaecology.ru/assets/theme/css/app.css в строке 38)
body {
    color: #000;
    font-family: 'GillSans';
    max-width: 1280px;
    margin: 0 auto;
    font-size: 16px;
   min-width: 940px;
}

что значит, что даже на разрешении 320 пикс у браузера BODY будет иметь min-width (минимальную ширину в 940px)

попробуйте в редакторе CSS-кода FireFox поиграться шириной этого тэга на нужных разрешениях и вы увидите результат.

И так далее следуйте по каждому блоку (и его родителям, в которые он упакован), который выходит за пределы требуемой ширины.

чтобы задать специальные условия в CSS для нестандартных разрешений упаковывайте специальные условия для того же тега BODY в CSS блок в конце CSS файла
@media screen and (max-width: 320px) { 
        body {
		min-weight:320px;
	}
}


Важно. Условие в 940px для больших разрешений удалять не требуется! Браузер поймет и отдаст приоритет тому разрешению, которое описано в параметре @media screen
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы