Виправити CSS (responsive), щоб шар #map з карткою OSM з'явився
665 UAH
Работа пустяковая, но очень срочная. Проект на 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/год)
Скайп: iamleprik
електронна пошта: [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 верстання
Інтернет-магазину одягуПотрібен розробник для інтернет-магазину одягу Шукаю досвідченого розробника для створення повноцінного інтернет-магазину одягу з дроп-моделлю продажу. Що потрібно зробити: 6 сторінок: головна, товар, кошик, оформлення, акаунт, адмін панель Вхід через Google акаунт Кошик і… HTML та CSS верстання, Javascript та Typescript ∙ 8 годин 44 хвилини тому ∙ 60 ставок |
Комплексне доопрацювання WooCommerce-магазину (UX, адаптивність, функціонал)Потрібно завершити розробку інтернет-магазину на WordPress (WooCommerce). Поточний сайт: https://lerise.com.ua/ Референс по рівню функціоналу та зручності користування: https://katysoho.com.ua/Важливо Кардинально змінювати дизайн сайту не потрібно. Основний акцент - на… CMS, HTML та CSS верстання ∙ 2 дні 2 години тому ∙ 37 ставок |
Сайт для весільних фотографів під ключ: дизайн + текст + запускШукаємо спеціаліста (або студію) для створення сайту-портфоліо під ключ - повний цикл від концепції до публікації. Хочемо мінімум участі з нашого боку: ви берете завдання і доводите до готового результату. Що входить у роботу «під ключ»: • Дизайн у стилі premium / editorial /… HTML та CSS верстання, Дизайн сайтів ∙ 2 дні 8 годин тому ∙ 113 ставок |
Шукаємо веб-дизайнера / верстальника на WordPress (конструктор Divi)https://annalecat.com/corporate-training/ Що треба зробити:У нас є одна сторінка на сайті, яка зараз виглядає погано. Треба переробити її дизайн і заверстати так, щоб вона виглядала красиво, сучасно та акуратно. Що ми вже маємо для роботи: Текст: Повністю готовий і розбитий… HTML та CSS верстання, Дизайн сайтів ∙ 4 дні 5 годин тому ∙ 36 ставок |
Верстка 3 сторінокНеобхідно зробити вертску за допомогою tailwind під вордпресс. Сторінки повинні бути максимально ізольовані від теми, аби не перекривати жодні стилі. Частина елементів вже існує в реалізованій темі, їх необхідно перевикористати. Мобільної версії в дизайні не має, необхідно… HTML та CSS верстання ∙ 5 днів 1 година тому ∙ 65 ставок |
Україна