Correction of CSS (responsive) to display the layer #map with OSM map
15 USD Работа пустяковая, но очень срочная. Проект на 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;
}
}
Ну а там как правильнее.
Оплата как за час работы.
Client's review of cooperation with Vasily Cheplyaka
Correction of CSS (responsive) to display the layer #map with OSM mapThank you for the speed!
Freelancer's review of cooperation with Andrii Pertsyuh
Correction of CSS (responsive) to display the layer #map with OSM mapA good customer 😉
-
Winning proposal1 day15 USD
191 10 2 Winning proposal1 day15 USDI would like to know what to do...
-
1 day5 USD
432 21 1 1 day5 USDLet’s discuss.
A little about myself:
I know: PHP 5.3+, MySQL, JavaScript, jQuery, xHTML, CSS3, Linux
I use: Smarty, Sphinx, mod_rewrite, memcache, own CMS
Worked with WordPress, PrestaShop, OpenCart, Zend Framework, phpBB3, IP.Board
Good front-end experience: track, animation and dynamic sites.
… Available online from 12-00 to 23-00
Payment by project or hourly rate ($12/hour)
by Skype: iamleprik
Email: [email protected]
Telephone number: +380674660520
-
1 day6 USD
97 1 day6 USDReady to perform.
-
1 day1 USD
245 8 0 1 day1 USDReady to help.
-
Ваша реализация с 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 то карта проявится, но тоже как-то коряво.создал отдельную страничку для отображения только карты, показывает:
-
Current freelance projects in the category HTML & CSS
Comprehensive refinement of the WooCommerce store (UX, responsiveness, functionality)It is necessary to complete the development of the online store on WordPress (WooCommerce). Current site: https://lerise.com.ua/ Reference for functionality and usability level: https://katysoho.com.ua/Important It is not necessary to radically change the design of the site.… Content Management Systems, HTML & CSS ∙ 1 day 11 hours back ∙ 34 proposals |
A turnkey website for wedding photographers: design + text + launchWe are looking for a specialist (or studio) to create a turnkey portfolio website - a full cycle from concept to publication. We want minimal involvement from our side: you take the task and bring it to a finished result. What is included in the "turnkey" work: • Design in… HTML & CSS, Web Design ∙ 1 day 18 hours back ∙ 107 proposals |
Looking for a web designer / developer on WordPress (Divi builder)https://annalecat.com/corporate-training/ What needs to be done: We have one page on the website that currently looks bad. It needs to be redesigned and laid out so that it looks beautiful, modern, and neat. What we already have for work: Text: Fully prepared and divided into… HTML & CSS, Web Design ∙ 3 days 14 hours back ∙ 36 proposals |
Processing and filling out a package of documents (Word and PDF)
68 USD
Looking for a freelancer for the prompt completion and formatting of a document package using ready-made templates (contracts, agreements, declarations). The task includes: Filling out these templates (candidate data, conditions, dates) in ready Word/PDF forms; Checking the… HTML & CSS, Text Editing & Proofreading ∙ 4 days 6 hours back ∙ 33 proposals |
Layout of 3 pagesIt is necessary to create a layout using Tailwind for WordPress. The pages should be as isolated from the theme as possible to avoid overriding any styles. Some elements already exist in the implemented theme and need to be reused. There is no mobile version in the design; the… HTML & CSS ∙ 4 days 10 hours back ∙ 65 proposals |
Ukraine