Исправить CSS (responsive), чтобы слой #map с картой OSM отображался
674 UAHРабота для профи минут на 5-10, оплачиваю как час, но нужно сделать немедленно.
Работа пустяковая, но очень срочная. Проект на jQuery Mobile. На главной странице проекта http://gurtom.mobi (#main-page) есть два слоя (классы .left_col и .right_col) Нужно разнести их в CSS так, чтобы работал принцип responsible дизайна, при котором левая .left_col будет 2/5 экрана, .right_col 3/5 экрана на широких экранах, и при уменьшении экрана .right_col исчезал, а .left_col заполнял 100% (картинки прилагаю)
Исходники фронта:
https://github.com/ClassOdUa/Civil-Society-Web
Вот так на широком экране:
И вот так на узком экране:
Идея CSS в подобном стиле:
@media all and (min-width: 800px) {
.left_col {
width: 780px;
float: left;
margin-right: 20px;
display: block;
}
.right_col {
width: 35%;
height: 35%;
float: right;
display: block;
}
}
@media all and (max-width: 799px) {
.left_col {
width: 100%;
}
.right_col {
display: none;
}
}
Ну а там как правильнее.
Оплата как за час работы.
Отзыв заказчика о сотрудничестве с Василием Чеплякой
Исправить CSS (responsive), чтобы слой #map с картой OSM отображалсяСпасибо за оперативность!
Отзыв фрилансера о сотрудничестве с Андрієм Перцюхом
Исправить CSS (responsive), чтобы слой #map с картой OSM отображалсяХороший заказчик 😉
-
Победившая ставка1 день674 UAH
191 10 2 Победившая ставка1 день674 UAHХотелось бы узнать что нужно сделать....
-
1 день200 UAH
432 21 1 1 день200 UAHДавайте обсудим.
Немного о себе:
Знаю: PHP 5.3+, MySQL, JavaScript, jQuery, xHTML, CSS3, Linux
Использую: Smarty, Sphinx, mod_rewrite, memcache, собственная CMS
Работал с WordPress, PrestaShop, OpenCart, Zend Framework, phpBB3, IP.Board
Хороший опыт front-end: верстка, анимация и динамические сайты.
… Доступен в онлайне с 12-00 до 23-00
Оплата по-проектно или почасовая ставка ($12/час)
Skype: iamleprik
E-mail: [email protected]
Телефон: +380674660520
-
1 день250 UAH
97 1 день250 UAHГотов выполнить.
-
1 день50 UAH
225 8 0 1 день50 UAHГотов помочь.
-
Ваша реализация с CSS - почти правильная
Я для широких экранов @media - не указываю - он по умолчанию работает
а для экранов меньше 799 - пишу так
@media (max-width: 799px) {
// тут Ваш код
}
Попробуйте - должно работать
-
Проблема в том, что именно на больших экранах НЕ отображается слой .right_col
-
Он есть - просто в нем нет содержимого
http://prntscr.com/876xn8
-
содержимое подгружается JavaScript-ом, это карта OSM с метками.
-
Если блок пустой - значит в него ничего не подгрузилось и это не проблема css, а скорее проблема js.
Где можно взглянуть на исходній код
-
Исходники фронта https://github.com/ClassOdUa/Civil-Society-Web
-
сори, между постами пробовал варианты затер внутренний слой.
Сейчас эта строка выглядит так:
<div class="right_col"><div class="map"></div></div>
где #map заполняется скриптом, подгружает карту OSM -
<div class="right_col"><divclassid="map"></div></div> -
Карта не выводится не из-за адаптивности
вы пробовали отображать карту в любом другом блоке?
В тех исходниках что вы выложили этого нет
-
http://gurtom.mobi/index1.html карта отображается, скрипт тот же.
-
после загрузки карты в #map можно инспектором увидеть что .leaflet-container {
overflow: hidden;
если в инспекторе снять этот hidden то карта проявится, но тоже как-то коряво.создал отдельную страничку для отображения только карты, показывает:
-
Актуальные фриланс-проекты в категории HTML и CSS верстка
Оптимизация сайта
Оптимазация сайта jdgreta.co.uk на Shopify. Сео аудит приложен к проекту. Основные задачи - - Поправить все мета данные - Выполнить ТЗ для программиста (тк в этом проекте совмещены задачи для программиста и СЕО, если вы не компания - можете использовать помощь) - Поправить… HTML и CSS верстка, PHP ∙ 19 часов 36 минут назад ∙ 29 ставок |
Перенос сайта на Shopify
Нужно перенести текущий сайт jdfurniture.uk с OpenCart на платформу Shopify. Сейчас сайт на OpenCart в целом нас устраивает по структуре и логике работы. Основная причина переноса — проблемы с платежными системами. На Shopify таких проблем быть не должно. Также для нас важно,… HTML и CSS верстка, Веб-программирование ∙ 1 день 13 часов назад ∙ 37 ставок |
Перенос дизайна на WordPress
2000 UAH
Добрый день! Необходимо перенести готовый дизайн одностраничного лендинга на WordPress. Макет полностью готов (Figma), дизайн разрабатывать не нужно. Необходимо качественно сверстать страницу, адаптировать под мобильные устройства и настроить её на WordPress. Пожалуйста, в… HTML и CSS верстка ∙ 1 день 19 часов назад ∙ 103 ставки |
Вывести посты из Инстаграма на сайт (опенкарт)
700 UAH
Здравствуйте. Нужно настроить функционал, чтобы на сайте (OpenCart) отображался блок с постами Instagram. Отзовитесь, кто делал и знает как ) Спасибо ) По стоимости договоримся, не знаю, сколько это стоит. HTML и CSS верстка, Веб-программирование ∙ 1 день 22 часа назад ∙ 51 ставка |
Лендинг для школы английского
13 500 UAH
Ищем дизайнера + верстальщика лендинга (Wix / WordPress / Weblium) Привет! Ищем исполнителя на дизайн и верстку лендинга курса английского языка. Что нужно: — дизайн и верстка лендинга на 12 блоков; — две страницы оплаты: успешная / неуспешная; — адаптив под мобильные; —… HTML и CSS верстка, Дизайн интерфейсов (UI/UX) ∙ 2 дня 1 час назад ∙ 134 ставки |
Украина