Клуб API Карт

Вместо карты в Вордпрессе серый фон

Пост в архиве.

Не всегда отображается карта на вот этой странице http://kaluga4you.ru/muzei-kalugi/.

Открываю в хроме на компьютере - серый фон вместо карты, а на планшете тоже в хроме карта видна. 

Из техподдержки ответили следующее:

Сделайте правило %%media="all"
audio, canvas, video {
display: inline-block;
max-width: 100%;
}%% более специфичным.


Коллеги, пожалуйста, поясните по русски, что они имели ввиду? Владею только основами верстки и не понимаю, что значит "более специфичное" правило

8 комментариев
Sergey Konstantinov
27 января 2016, 22:43
http://webreligion.ru/uchebniki/css/chto-takoe-css вот хороший учебник вроде.

Мне же не учебник нужен, я основы css знаю. К тому же там всего одна страница. Мне нужно понять, что такое более специфичное правило. Мне это нигде в обучении css не встречалось

Sergey Konstantinov
27 января 2016, 22:43
http://habrahabr.ru/post/128970/

Ваше правило canvas { max-width: 100% } действует абсолютно на все канвасы на странице.

Сделать его более специфичным = указать, на какие конкретно элементы должно распространяться это правило.

Конкретно, на карту и всё, что в неё вложено, это правило распространяться *не* должно.

О! Так уже понятнее. Попробую и отпишусь о результате. Спасибо за ответ и помощь!

Как я поняла, это сами карты Яндекса работают на основе этих счамых canvas. проблему решила радикально, удалив совсем свойство max-width для canvas. 

Но ведь это наверное не очень хорошо? Пока вроде ничего не сломалось. Но где может всплыть потом этот тэг?

Может есть возможность чисто для элементов яндекса как то убрать max-width?

Sergey Konstantinov
27 января 2016, 22:43
Обычно правила типа canvas, img { max-width: 100% } ставят в блогах, чтобы вставленные изображения, если они слишком большие по ширине, не раздували страницу. Нет изображений — нет проблемы, тем более, что через канвас картинки вставляют, мягко говоря, нечасто.

Ну у меня много изображений в блоге и пока все ок, при смене ширины экрана все адаптируется

Спасибо огромное вам за помощь!