Publish your project for free and start receiving offers from freelance contractors in serveral minutes after publication!
15 $

Исправить CSS (responsive), чтобы слой #map с картой OSM отображался

project complete


Работа для профи минут на 5-10, оплачиваю как час, но нужно сделать немедленно.

http://gurtom.mobi



Update #1 from 21 August 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

Вот так на широком экране:

01.png

И вот так на узком экране:

02.png


Идея 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;
}



}



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

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

Client's feedback about the contractor Василии Ч.

Quality
Professionalism
Price
Availability
Terms

Спасибо за оперативность!

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

Freelancer's feedback about the client Андрії Перцюсі

Payment
Task formulation
Requirements
Availability

Хороший заказчик 😉

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


Make a proposal!

The client doesn't want to make prepayment? Offer him to make a payment via Safe to avoid possible fraud.

  1. proposal concealed by freelancer
  2.  freelancer isn't working in the service any longer
  3. 1 day200 ₴
    Олег Леприк
     651   11   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/час)

    Skype: iamleprik
    E-mail: [email protected]
    Телефон: +380674660520

    Ukraine Kyiv | 21 August 2015 |
  4. 1 day15 $Winning proposal
    Василий Чепляка
     434   10   2

    Хотелось бы узнать что нужно сделать....

    Ukraine Kropivnitskiy (Kirovograd) | 21 August 2015 |
  1. 1 day50 ₴
    Александр Андреевич
     369   8   0

    Готов помочь.

    Ukraine Kyiv | 20 August 2015 |
  2. 1 day250 ₴
    Слава Тищен
     112 

    Готов выполнить.

    Ukraine Kyiv | 20 August 2015 |
  1. proposal withdrawn
  • Ваша реализация с CSS - почти правильная

    Я для широких экранов media media - не указываю - он по умолчанию работает

    а для экранов меньше 799 - пишу так

    media media (max-width: 799px) {

    // тут Ваш код

    }


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


  • Андрій Перцюх — project author
    Complain | 21 August 2015 |

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

  • Он есть - просто в нем нет содержимого

    http://prntscr.com/876xn8

  • Андрій Перцюх — project author
    Complain | 21 August 2015 |

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

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

    Где можно взглянуть на исходній код

  • Андрій Перцюх — project author
    Complain | 21 August 2015 |

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

  • Андрій Перцюх — project author
    Complain | 21 August 2015 |

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

  • Андрій Перцюх — project author
    Complain | 21 August 2015 |
    <div class="right_col"><div class id="map"></div></div>
  • http://prntscr.com/877ouv

    Карта не выводится не из-за адаптивности

    вы пробовали отображать карту в любом другом блоке?

    В тех исходниках что вы выложили этого нет

  • Андрій Перцюх — project author
    Complain | 21 August 2015 |

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

  • Андрій Перцюх — project author
    Complain | 21 August 2015 |

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

    если в инспекторе снять этот hidden то карта проявится, но тоже как-то коряво.

    создал отдельную страничку для отображения только карты, показывает:

    http://gurtom.mobi/#map-page


  • Add

Client
Андрій Перцюх
Ukraine Ukraine  1   0
Project published
20 August 2015
272 views
Payment methods
Labels
Share