Позиционирование синей пляшки

[vipTelnet]

Всем привет
Друзья помогите правильно спозиционировать синию пляшку там где адреса и телефоны она должна быть над гугло картой, а не под ней как сейчас.
Для просмотра ссылки Войди или Зарегистрируйся

 

[ZOLK]

Всем привет
Друзья помогите правильно спозиционировать синию пляшку там где адреса и телефоны она должна быть над гугло картой, а не под ней как сейчас.
Для просмотра ссылки Войди или Зарегистрируйся

Для блока contacts получается только с position: absolute и z-index ну и с размером блока там в ручную получается.

Еще блок текста в разделе о компании косячный

 

[vipTelnet]

Для блока contacts получается только с position: absolute и z-index ну и с размером блока там в ручную получается.

Еще блок текста в разделе о компании косячный

можно показать css как надо ?

 

[igumenov]

можно показать css как надо ?

.item-page .contacts {
  background-color: #0091dc;
  padding: 30px 0px;
  color: white;
  display: block;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 99999999999;
}

#map_canvas1496333342 {
  margin-bottom: -20px;
margin-top:-50px
}

 

[invader]

Впервые вижу чтобы margin-bottom делали минусовым

Удивительно "полезное" сообщение.
Вы будете сообщать о всём, что видите впервые?

 

[spyrius]

Вам нужно дописать правила для стиля .item-page .contacts в style.css следующим образом:

.item-page .contacts {
    background-color: #0091dc;
    padding: 30px 0px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    margin: -50px 0 0;
    left: 0;
    width: 100%;
}

margin: -50px 0 0; - убираем отступы слева, справа и снизу
left: 0; - указываем отступ от левого края экрана для абсолютного позиционирования
width: 100%; - растягиваем синий блок на всю ширину экрана

Если не добавлять эти правила, дефолтные значения будут браться с бутстраповского файла стилей bootstrap.min.css (смотрите код блока в Developer Tools в хроме или Bugzilla в FF)

Еще желательно поработать с адаптивной сеткой bootstrap (медиа запросы) так, чтобы блоки с контактами (и вообще все элементы на сайте) правильно позиционировались и оставались читабельными на небольших разрешениях экранов. Например, блок с телефонами на синем фоне было бы хорошо переносить под блок с адресом, а почтовые ящики в следующий ряд еще ниже на разрешениях меньше 460px в ширину. В документации к bootstrap всё очень доступно расписано.