- CSS для розтягування на всю ширину віджету коментарів ВКонтакте
- CSS для розтягування на всю ширину віджету коментарів Facebook
В епоху адаптивних дизайнів, коли розміри екранів користувачів можуть відрізнятися в десятки разів, задавати жорсткі розміри елементів інтерфейсу сайту не зовсім доцільно.
І якщо всередині сайту, розробник ще може якось передбачити і проконтролювати всі варіації подання контенту, то ось з підключеними зовнішніми сервісами іноді виникають завдання, які стандартними (рекомендованими) методами просто не вирішуються.
Я не раз стикався з такою, здавалося б простим завданням, як установка на сайт віджетів коментування Facebook і ВКонтакте. Все досить просто: реєструєш додаток, настроюєш висновок, генеріруешь код і вставляєш в потрібне місце на сайті. Все б нічого, але ось ні той, ні інший віджет не підтримують гумові розміри в процентах. І таке банальне завдання, як розтягнути віджет на весь екран або вписати в гумовий блок, засобами самого віджета просто не наважувалася. Через що адаптивна верстка починала втрачати весь сенс.
Насправді - все дуже просто, і досить легко вирішується. Досить внести в CSS-таблицю вашого сайту кілька уточнюючих рядків стилів для відображення віджетів коментування.
CSS для розтягування на всю ширину віджету коментарів ВКонтакте
/ * Full width VK comments from danilin.biz * / #vk_comments, #vk_comments iframe {width: 100%! Important; }
CSS для розтягування на всю ширину віджету коментарів Facebook
/ * Full width Facebook comments from danilin.biz * / .fb-comments, .fb-comments iframe [style], .fb-like-box, .fb-like-box iframe [style], .fb-comments span, .fb-comments iframe span [style], .fb-like-box span, .fb-like-box iframe span [style] {width: 100%! important; }
Зверніть увагу, що стилі Facebook працюватимуть тільки з кодом на HTML5, причому виключно на актуальною на даний момент версії. На старих версіях використовувалася трохи інша структура стилів. Я думаю, це ще один привід, щоб оновити нарешті свої старі віджети Facebook. Ну, а як буде виглядати код в майбутньому, я, на жаль, не знаю.