Адаптивный Bislite на Bootstrap

[theobroma]

Прошу оценить мой вариант небезызвестного макета Bislite http://bislite.esy.es/.  Присутствуют страницы Portfolio и Contact us. Я пытался  все сделать адаптивно - ресайзинг окна браузера приветствуется. 

Что еще: 

Проблема:

 Хотелось выяснить, как лучше сделать в такой ситуации: как я понимаю, шаблон  Bislite изначально не был сделан для удобной верстки на Bootstrap. Я воспользовался плагином фотошоп GuideGuide и наложил сетку: http://joxi.ru/zpM5VIwyTJAIb9-G5IM.

Телефон  в блоке Contact Us выходить за пределы колонки и залезает на gutter. Я вроде как не могу взять еще одну колонку, ибо она нужна для социальных кнопок. В  моей верстке видно, что  телефон не влазит и переходит на  следующую строку. То есть,  я все же оставил две колонки... Но  хочется все сделать pixel perfect. Что можете посоветовать?

 

 

Дополнительно:

  Если кому интересно, вот ссылка на  дев-файлы  https://drive.google.com/open?id=0B4kvNqHG36yLZ1JpX2pYX0xuaVU&authuser=0

 

[swandev]

От 992px до 1046px присутствует скролл, который не красиво обрезает фоны, да и вообще его не должно быть.

[theobroma]

От 992px до 1046px присутствует скролл, который не красиво обрезает фоны, да и вообще его не должно быть.

Спасибо. Вот только не пойму что с этим делать. Как я уже писал, шаблон не был изначально для Bootstrap: там ширина контента 1000px. В variables.less я переприсвоил @container-md на 1030px с 960px. Что же теперь можно сделать, и как вообще правильно?

P.S. А есть еще какие-нибудь критические замечания? 

[swandev]

1. Скролл появляется из-за вот этого св-ва

@media (min-width: 992px).container {  width: 1030px;} 

т.е от 992 до 1030 px контейнер у вас шире чем нужно, от этого и скролл

2. нет ховеров на многие элементы (кнопки у карусели, кнопки соц сетей, кнопка "download psd")

3. в футере в разделах EXPLORE и BROWSE мне кажется там должен быть список ссылок

4. в футере логотип сделать ссылкой (как в хедере)

[theobroma]

1. @screen-md-min увеличил с 992px до 1046px. Скролл исчез.

2.Освоил генерацию спрайтов с помощью Gulp. По возможности все запихнул в один спрайт.Добавил ховеры.

3.4. Это мне понятно. Просто мало интересно, случайно пропустил - больше за другое как-то волновался...В общем, исправил.

 

Перезалил на тот же адрес.

[swandev]

1. Вот что будет если футер будет выше чем 320 px (padding-bottom у обертки) http://joxi.ru/XEA4bbRlsZVlmb

я бы с помощью js ставил padding равный высоте футера, и при ресайзе браузера все пересчитывал

ну или найти другой способ прижатия футера

 

2. вот на таком разрешении не очень красиво выглядит http://joxi.ru/4DmBRRQ9hP7amP

нужно как-то продумать адаптивность, колонки там не очень широкие нужно их выровнять  и по 2 в ряд

 

3. в футере название разделов в теге h2, мне кажется он не совсем для этого подходит

Edited October 15, 2014 by ALEEX SWN

[theobroma]

1. Метод прижатия мне нравиться. Сделал   "динамический" padding  c помощью следующего кода 

gwPadding = function() {                                      //  Функция для назначения padding-bottom  var $footerHeight =$('#footer').height();                   //  Определяем высоту футера и это значение присваиваем переменной      $('.global-wrap').css("padding-bottom",$footerHeight);  //  Добавляем CSS свойство .global-wrap};$(document).ready(gwPadding);                                 //  Вызов функции при загрузке документа$(window).resize(gwPadding);                                  //  Вызов функции при изменении ширины окна

2. Так же изменил немного поведение блоков в футере на более  симпатичное..

3. На счет заголовков... Смотрел как на других ресурсах:  творится какая-то полная анархия: 1) делают различными заголовками -  от h1 до h4; 2) классами вида class="heading", class="h4" и т.п, присваивая их div'ам, внутри которых надпис;3)  тупо загоняют в тэг span.  А как правильнее всего?   Я сделал эти заголовки h2 исходя из того, что другие заголовки на странице имеют такие же стили, как и эти, даже размер шрифта  один и тот же. Почему нет?

[swandev]

3. Вот тут я думаю хорошая реализация

http://www.invisionapp.com/

 

h2 все таки более значимый заголовок, на том же сайте он правильно применен