• Как поменять цвет svg?

    Есть *иконка* черного цвета,

    Было бы лучше, если бы вы приложили код файла этой иконки, чтобы на Вашем примере можно было показать решение.

    но что делать, если мне нужна она белого цвета

    Открыть svg-файл с помощью графического редактора или редактора кода и изменить цвет

    Можно как то изменить цвет ?

    Можно. В основном, цвет SVG-элементов задаётся через атрибут/свойство "fill", иногда через атрибут/свойство "stroke". В зависимости от типа фигуры.

    Повторюсь, что если приложите код файла иконки, смогу показать решение на Вашем примере.

    Update
    Вот Вам код svg-файла с белым цветом значка
    <svg height="34" viewBox="0 0 24 24" width="34" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" fill="#fff"/></svg>


    А вот он же, но закодированный в Base64 (в котором Вы предоставили пример)
    data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=
    Ответ написан
    1 комментарий
  • Как определить ширину или высоту элемента в css?

    Paramid
    @Paramid
    vh-vw это просто единицы измерения.
    .element{
    margin-top: calc(50vh-n) // n - тут не прокатит, это переменная, её нельзя пропихнуть в css
    }
    это css, в нём особо не покодишь, переменных тут нет, если не использовать препроцессоры.
    нужно использовать js, и непосредственно js`ом работать с размерами.
    используя библиотеку jquery, например
    var h = $('#container').css('height');
    Ответ написан
    Комментировать
  • Как называется этот плагин?

    idShura
    @idShura
    Это не плагин, а мультикурсор. Зажимаешь ctrl+alt и стрелки вверх или вниз, также можно установить спомощью мышки, зажав среднюю кнопку мышки.
    Ответ написан
    1 комментарий
  • Как лучше сделать?

    Minuvi
    @Minuvi
    Good UI Designer
    Просить райтера или заказчика сделать примерно одинаковое кол-во символов.
    Предложить свой вариант сокращения.
    Донести, что такой столбик текста ни один юзер не станет читать.
    Если ничего не сработало, то я б выбрал вар.2 (в первом поясняющая кнопка очень далеко от абзаца, группировка сломалась).
    ps. Еще я б фон сделал белым, а неактивные блоки салатовым.
    Ответ написан
    Комментировать
  • Как лучше сделать?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    1. Исключить появление такого объема текста, например, гайдлайном.
    2. Добавить гармошку: эффект при наведении или клике. Оба варика хуже первого.
    Ответ написан
    Комментировать
  • Чем отличаются max-width от width?

    @mexsmg
    Если просто, max-width - это максимальный размер для блока. Если установить max-width: 1000px, а width: 100%, то на мониторах больше чем 1000px ширина блока будет 1000px, а на мониторах меньше, будет занимать ширину монитора.
    Ответ написан
    Комментировать
  • Чем отличаются max-width от width?

    wapster92
    @wapster92 Куратор тега CSS
    В этом случае два блока текста получаются одинаковыми.
    глазомер хромает посмотри цифры в девтулзах
    Width: 100% max-width: 600px
    это значит блок 100% от ширины родителя, но ограничение не даст ему увеличиться в 600px.
    Если мы записываем max-width и width в процентах, то разницы между ними я вообще не вижу.
    даже не знаю где бы такое пригодилось.
    Ответ написан
    Комментировать
  • Чем отличаются max-width от width?

    dimovich85
    @dimovich85 Куратор тега CSS
    https://u-academy.net/
    Ширина блока от родителя, все верно. Если даете для body ширину, то: https://codepen.io/dimovich85/pen/XWXJvPy
    Ширина явно разная. Вы на глаз 100 и 80 пикселей не различили.
    Давайте логически: ширина 100 процентов, но не больше 30 процентов?
    Дайте мне полный стакан воды, но наполовину полный. Это если Вы оптимист;)
    Конечно в процентах разницы не будет.
    И еще - у width и max-width разные приоритеты, почитайте, и думаю все на полочки ляжет.
    PS: удобно написать модалке width: 100%; max-width: 600px, ведь на мобилках модалка на весь экран, а на десктопе - как на макете, всего 600, так что полезные сочетания свойств;)
    Ответ написан
    Комментировать
  • Почему body "не перекрывает" p?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Потому что в спеке отдельной графой так описано. Про специфичность.

    Стили непосредственно соответствующих элементов всегда предпочитаются унаследованным стилям, независимо от специфичности унаследованного правила


    Чтобы уложить в голове, нужно нарочито утрировать и посмотреть как это работает:

    Ответ написан
    1 комментарий
  • Может ли тэг nav использоваться в footer?

    https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

    Примечание
    Не обязательно все ссылки должны быть обернуты в . следует использовать лишь для главных навигационных блоков. Например, часто содержит список ссылок, которые не стоит оборачивать в .
    Ответ написан
    Комментировать
  • Может ли тэг nav использоваться в footer?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега HTML
    Руководитель frontend направления, предприниматель
    Верстка по семантике это просто складывание логических данных в логические теги. Nav отвечает за навигацию, что понятно из названия, footer отвечает за дополнительную информацию раздела.

    Акцентирую, именно раздела, притом в контексте глобального футера это будет дополнительная информация всего сайта. При этом он, как и header может быть размещен внутри section.

    При всем при этом некоторые теги требуют некоей иерархи, например article не переживет (переживет) если ты разместишь внутри него 2 и более h1. Section, как логический блок требует заголовка (не обязательного, но варнинг ты получишь).

    А nav, как я сказал выше это просто логический элемент. Тебе следует использовать его там, где ты указываешь навигацию. В виде ссылочной массы. Хорошо, если это будет основная навигация.

    Чтобы проверить точнее, пользуйся валидатором от W3C. У него есть свои погрешности, поэтому проверяй соответствие спецификации.
    Ответ написан
    Комментировать