Popraw CSS (responsive), aby wyświetlić warstwę #map z mapą OSM
55 PLN
Работа пустяковая, но очень срочная. Проект на 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;
}
}
Ну а там как правильнее.
Оплата как за час работы.
Opinia zleceniodawcy o współpracy z Vasily Cheplyaka
Popraw CSS (responsive), aby wyświetlić warstwę #map z mapą OSMDziękuję za szybkość!
Opinia freelancera o współpracy z Andrii Pertsyuh
Popraw CSS (responsive), aby wyświetlić warstwę #map z mapą OSMDobry klient 😉
-
Oferta, która wygrała1 dzień55 PLN
191 10 2 Oferta, która wygrała1 dzień55 PLNChciałbym dowiedzieć się, co trzeba zrobić...
-
1 dzień16 PLN
432 21 1 1 dzień16 PLNPorozmawiajmy o tym.
Trochę o sobie:
Znam: PHP 5.3+, MySQL, JavaScript, jQuery, xHTML, CSS3, Linux
Używam: Smarty, Sphinx, mod_rewrite, memcache, własny CMS
Pracował z WordPress, PrestaShop, OpenCart, Zend Framework, phpBB3, IP.Board
Dobre doświadczenie front-end: strumień, animacja i dynamiczne strony.
… Dostępne w Internecie od 12-00 do 23-00
Opłata za projekt lub stawka godzinna ($ 12/godzinny)
Skype: iamleprik
E-mail: [email protected]
Telefon: +380674660520
-
1 dzień21 PLN
97 1 dzień21 PLNGotowy do wykonania.
-
1 dzień4 PLN
245 8 0 1 dzień4 PLNGotowy do pomocy.
-
Ваша реализация с 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 то карта проявится, но тоже как-то коряво.создал отдельную страничку для отображения только карты, показывает:
-
Aktualne zlecenia dla freelancerów w kategorii Javascript & Typescript
Full-stack rozwój — Amazon PPC Dashboard (Etap 1)Potrzebny programista full-stack z doświadczeniem w pracy z Amazon API do realizacji Etapu 1 wewnętrznego dashboardu PPC. Projekt realny, dane żywe, wszystko gotowe do startu. Prototyp frontendu (5 stron, React + TypeScript): CO JUŻ GOTOWE — Prototyp frontendu na React 18 +… Javascript & Typescript, Programowanie stron internetowych ∙ 1 dzień 21 godzin temu ∙ 27 ofert |
Opracowanie strony internetowej do tworzenia fotoksiążek i ram fotowychCel projektuNależy opracować nowoczesną stronę internetową do zamawiania fotoksiążek, ram fotowych i innych spersonalizowanych produktów fotograficznych.Głównym celem projektu jest umożliwienie klientowi samodzielnego stworzenia gotowego projektu produktu bez udziału projektanta… Javascript & Typescript, Programowanie stron internetowych ∙ 3 dni 13 godzin temu ∙ 96 ofert |
Zespół do samodzielnie stworzonej platformy rynkowej usług pogrzebowych.Poszukujemy zespołu do uruchomienia i rozwoju autorskiej krajowej platformy rynkowej usług pogrzebowych. Od razu: nie szukamy pojedynczych osób, juniorów ani "zbieraczy stron". Potrzebny jest silny zespół produktowy na poziomie middle+/senior z rzeczywistymi przypadkami… Javascript & Typescript, Programowanie stron internetowych ∙ 4 dni 8 godzin temu ∙ 27 ofert |
Dopracowanie istniejącego projektu Next.js/Supabase: oferty, CRM, analityka, czat AIIstnieje działający projekt WatchGenius — platforma analityczna luksusowych zegarków z katalogiem modeli, analizą cen, zewnętrznymi ofertami, formularzami zgłoszeniowymi i czatem AI. Projekt został już częściowo opracowany. Potrzebny jest doświadczony programista full-stack,… Javascript & Typescript, Programowanie stron internetowych ∙ 6 dni 9 godzin temu ∙ 55 ofert |
Szukam Senior Full-Stack dewelopera (Payload CMS) — migracja 2 stron internetowych sieci hoteliSieć kurortowych hoteli przechodzi z Webflow na własny headless-stack. Dwie strony korporacyjne (~140 stron razem), architektura multi-tenant — jeden kod obsługuje kilka hoteli na różnych domenach. Projekt już wystartował: infrastruktura jest wdrożona, najemcy są… Content Management Systems, Javascript & Typescript ∙ 10 dni 7 godzin temu ∙ 19 ofert |
Ukraina