Исправить CSS (responsive), чтобы слой #map с картой OSM отображался
665 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 день665 UAH
191 10 2 Победившая ставка1 день665 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
245 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 верстка
Комплексное доработки WooCommerce-магазина (UX, адаптивность, функционал)Необходимо завершить разработку интернет-магазина на WordPress (WooCommerce). Текущий сайт: https://lerise.com.ua/ Референс по уровню функционала и удобства использования: https://katysoho.com.ua/Важно Кардинально менять дизайн сайта не нужно. Основной акцент - на… CMS, HTML и CSS верстка ∙ 10 часов 41 минута назад ∙ 23 ставки |
Сайт для свадебных фотографов под ключ: дизайн + текст + запускИщем специалиста (или студию) для создания сайта-портфолио под ключ - полный цикл от концепции до публикации. Хотим минимум участия с нашей стороны: вы берете задание и доводите до готового результата. Что входит в работу «под ключ»: • Дизайн в стиле premium / editorial /… HTML и CSS верстка, Дизайн сайтов ∙ 16 часов 51 минута назад ∙ 90 ставок |
Ищем веб-дизайнера / верстальщика на WordPress (конструктор Divi)https://annalecat.com/corporate-training/ Что нужно сделать: У нас есть одна страница на сайте, которая сейчас выглядит плохо. Нужно переделать её дизайн и сверстать так, чтобы она выглядела красиво, современно и аккуратно. Что мы уже имеем для работы: Текст: Полностью готов… HTML и CSS верстка, Дизайн сайтов ∙ 2 дня 13 часов назад ∙ 36 ставок |
Обработка и заполнение пакета документов (Word и PDF)
3016 UAH
Ищу фрилансера для оперативного заполнения и форматирования пакета документов по готовым шаблонам (договоры, контракты, декларации). Что входит в задачу: Заполнение этих самых шаблонов (анкетные данные кандидатов, условия, даты) в готовые формы Word/PDF; Проверка корректности… HTML и CSS верстка, Редактура и корректура текстов ∙ 3 дня 5 часов назад ∙ 33 ставки |
Верстка 3 страницНеобходимо сделать верстку с помощью tailwind под вордпресс. Страницы должны быть максимально изолированы от темы, чтобы не перекрывать никакие стили. Часть элементов уже существует в реализованной теме, их необходимо переиспользовать. Мобильной версии в дизайне нет,… HTML и CSS верстка ∙ 3 дня 9 часов назад ∙ 65 ставок |
Украина