Фриланс-проєкти

Фриланс-проєкти

Виправити CSS (responsive), щоб шар #map з карткою OSM з'явився

HTML та CSS верстання, Javascript та Typescript, Веб-програмування — неправильно зазначені категорії?

670 UAH

Відгук фрилансера про співпрацю з Андрієм Перцюхом

Виправити CSS (responsive), щоб шар #map з карткою OSM з'явився

670 UAH

Дуже хороший замовник 😉

5.0

Василий Чепляка

Зустрічний відгук

21 серпня 2015

Проєкт перекладено автоматично. Увійдіть або зареєструйтесь, щоб побачити оригінал Робота для професіоналів хвилин на 5-10, плачу як годину, але потрібно зробити негайно. HTTP://gurtom.mobi

Оновлення #1 від 21 серпня 2015

Работа пустяковая, но очень срочная. Проект на 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;
}

}

Ну а там как правильнее.

Оплата как за час работы.

Ставки 4 Відкликані 1 Відхилені 2 Обговорення 11

Василий Чепляка

Переможець

10 2

Проєкти -
Оцінка -
Рейтинг 191

Бюджет: 15 USD Термін: 1 день

Хотілося б дізнатися, що потрібно зробити...

Олег Леприк

21 1

Проєкти 12
Оцінка -
Рейтинг 432

Бюджет: 200 UAH Термін: 1 день

Давайте обговорюємо.

трохи про себе:

Знаю: 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

У списку не показані ставки, приховані замовником чи фрилансером з Plus, а також ставки, що порушують правила

Слава Тищен

0 0

Проєкти -
Оцінка -
Рейтинг 97

Бюджет: 250 UAH Термін: 1 день

Готова виконати.

Александр Андреевич

8 0

Проєкти -
Оцінка -
Рейтинг 245

Бюджет: 50 UAH Термін: 1 день

Готова допомогти.

Василий Чепляка 21 серпня 2015

Ваша реализация с CSS - почти правильная
Я для широких экранов @media - не указываю - он по умолчанию работает
а для экранов меньше 799 - пишу так
@media (max-width: 799px) {
// тут Ваш код
}

Попробуйте - должно работать

Андрій Перцюх

21 серпня 2015

Проблема в том, что именно на больших экранах НЕ отображается слой .right_col

Василий Чепляка 21 серпня 2015

Он есть - просто в нем нет содержимого
http://prntscr.com/876xn8

Андрій Перцюх

21 серпня 2015

содержимое подгружается JavaScript-ом, это карта OSM с метками.

Василий Чепляка 21 серпня 2015

Если блок пустой - значит в него ничего не подгрузилось и это не проблема css, а скорее проблема js.
Где можно взглянуть на исходній код

Андрій Перцюх

21 серпня 2015

Исходники фронта https://github.com/ClassOdUa/Civil-Society-Web

Андрій Перцюх

21 серпня 2015

сори, между постами пробовал варианты затер внутренний слой.
Сейчас эта строка выглядит так:
<div class="right_col"><div class="map"></div></div>
где #map заполняется скриптом, подгружает карту OSM

Андрій Перцюх

21 серпня 2015

<div class="right_col"><div ~~class~~ id="map"></div></div>

Василий Чепляка 21 серпня 2015

http://prntscr.com/877ouv
Карта не выводится не из-за адаптивности
вы пробовали отображать карту в любом другом блоке?
В тех исходниках что вы выложили этого нет

Андрій Перцюх

21 серпня 2015

http://gurtom.mobi/index1.html карта отображается, скрипт тот же.

Андрій Перцюх

21 серпня 2015

после загрузки карты в #map можно инспектором увидеть что .leaflet-container {
overflow: hidden;

если в инспекторе снять этот hidden то карта проявится, но тоже как-то коряво.
создал отдельную страничку для отображения только карты, показывает:
http://gurtom.mobi/#map-page

Додати коментар

Актуальні фриланс-проєкти в категорії HTML та CSS верстання

Верстка макету

88 ставок 3 серпня

Не вказано
Шукаємо верстальника.

147 ставок 29 липня

34 725 UAH
Зверстати сайт на WP

Дизайн сайтів 132 ставки 28 липня

Не вказано
Email-дизайнер / Верстальник листів

E-mail маркетинг 53 ставки 27 липня

5000 UAH
Новий адаптивний HTML/CSS-шаблон для великого сайту з legacy-кодом

72 ставки 27 липня

Не вказано

Андрій Перцюх
Україна

Проєктів -
Оцінка -
Рейтинг 169

Виправити CSS (responsive), щоб шар #map з карткою OSM з'явився

Відгук замовника про співпрацю з Василиєм Чеплякою

Виправити CSS (responsive), щоб шар #map з карткою OSM з'явився

5.0

Андрій Перцюх

Відгук фрилансера про співпрацю з Андрієм Перцюхом

Виправити CSS (responsive), щоб шар #map з карткою OSM з'явився

5.0

Василий Чепляка

Василий Чепляка

Олег Леприк

Ставки поки відсутні

Ставки приховані

Слава Тищен

Александр Андреевич

Актуальні фриланс-проєкти в категорії HTML та CSS верстання

Верстка макету

Шукаємо верстальника.

Зверстати сайт на WP

Email-дизайнер / Верстальник листів

Новий адаптивний HTML/CSS-шаблон для великого сайту з legacy-кодом