Report

есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
.content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>

Привет!

Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube.
https://mydevcube.com/
Это международная компания, которая занимается DevOps, web и software разработками.

На данный момент в команду требуются Full stack .NET (Junior & Senior)

— 3+ year of commercial experience;
— Strong knowledge of Angular 5+;
— Strong knowledge of Typescript;
— Experience with HTML/HTML5, CSS/CSS3, SCSS;
— Good understanding of Git;
— Conversational English.

Будет плюсом: VB experience

Условия:
Удаленная работа full-time
Зарплата от 10-20$/час по результатам собеседования.

Обязательное условие - быть на связи до 21-22:00 по Москве.
Для отклика прошу писать на почту: evgeniia.ko@mydevcube.com

<div class="center-menu"> <div class="center-bar-one"> <h1> Новости </h1> <p>Сегодня 21 января было совершено нападение на одного из наших брокеров, прямо у дверей московской фондовой биржи. Нападающий выскочивший из за угла был одет в черный костюм с красным галстуком и в маске напала на олега олежина после чего скрылся и его след простыл. Олежин был немедленно госпитолизирован, мвд по московской области ведет расследование.</p> </div> </div> Вот хтмл код этого элемента
.center-bar-one { float: left; width: 150px; height: 200px; font-size: 11px; color: blue; } Когда я прописываю размер шрифта и в коде присутствует тег <p>, то размер шрифта не меняется. Если прописать например цвет, то никаких проблем нет. Когда убираю тег <p> то шрифт меняется. В чем дело? помогите

Добрый день!
Подгружаю шрифты с google fonts, имя шрифта Fira Sans (и причем он у них отображается корректно), но когда я его подгружаю он выглядит так как будто избитый.
Привожу 2 скриншота:
1. Как выглядит шрифт на google fonts

2. Так выглядит у меня

Почему так получается?
Все эти манипуляции я провожу в браузере Firefox.

Всем здравствуйте! Столкнулся с проблемой и никак не могу найти рабочее решение. Помогите неучу, пожалуйста! Вот ссылка на JSFiddle и пример кода:
HTML:
<div class="lineHeight">   HELLO // line-height method </div> <div class="padding">   HELLO // padding method </div> CSS:
@import url('https://fonts.googleapis.com/css?family=Open+Sans'); div {   font-family: 'Open Sans', sans-serif;   font-size: 14px;   height: 100px;   background: lightgreen;   margin: 5px;   padding-left: 10px;   box-sizing: border-box; } .lineHeight {   line-height: 100px; } .padding {   padding-top: 42px; /* (100px - 14px) / 2 - 1px */ } Ситуация следующая:

В случаях с line-height и padding текст ровно по центру, отступы по 45px сверху и снизу:



- Google Chrome (v. 55.0.2883.87 m);
- Mozilla Firefox (v. 50.1.0);
- Opera (v. 42.0.2393.94);
- Safari (macOS, v. 10.0 12602.1.32.7);

Для line-height отступы по 45px, для padding 46px сверху и 44px снизу:



- Safari (Windows, v. 5.1.7 7534.57.2);

В случаях с line-height и padding текст ровно по центру, отступы 46px сверху и 44px снизу:



- Internet Explorer 11 (v. 11.576.14393.0);
- Microsoft EDGE (v. 38.14393.0.0);
Я понимаю, что в ряде случаев это не принципиально, но что делать если блок с текстом это, например, меню, а сбоку от текста расположена ровная иконка, положение которой задано через background-position. Выравниваешь иконку для одного браузера - плывёт в другом. Выглядит весьма заметно и некрасиво. И Бог бы с этим эксплорером, но дело вот в чём, на Android 6.0.1 (device pixel ratio 4.0) стандартный интернет браузер, а также скаченный Google Chrome центруют неровно, также наблюдается расхождение в 1 пиксель, а вот на это уже закрывать глаза не хочется (большой скрин с Android):

Что примичательно, высота первой буквы на настольных компьютерах 10px, а на андроиде чуть больше.
Разумеется добиться идеальной картинки, да ещё и во всех браузерах одновременно, невозможно, но ведь это не какой-то частный случай, а вполне закономерное желание разместить текст по центру меню-бара. Я буду очень признателен за Вашу помощь и пояснения на предмет "best-practices".
Что я пробовал для решения данной проблемы:
- Использовал разные шрифты, а также разные методы подключения внешних шрифтов: link через html / @import в CSS для Google Fonts, а также @font-face url для скаченных шрифтов;
- Задавал размеры шрифта, отступы, line-height в em / rem / px;
- Пробовал различные комбинации line-height + padding;
- Для создания иконок меню пробовал псевдо элементы, это конечно же решает проблему расположения иконок относительно текста, но не решает проблему центровки по вертикали.

P.S. CSS сброшен. Meta viewport задан.

Доп. вопрос от новичка: Почему, задавая размер шрифта 14px, заглавная буква по факту занимает 10px? При этом если я использую буквы типа "Й" и "р", высота занимаемая текстом будет уже 16px, но никак не 14px. Что-же задают тогда эти пиксели в размере шрифта?