Как убрать плавающий скролл при фокусе на поле?

Азамат Шарафутдинов, весь код.

Шабаш ведьм-программистов, которые умеют по фото определять проблему в коде, я уже устал собирать сегодня. Никто не хочет лететь больше.

Поэтому присылайте весь код.

Как убрать плавающий скролл при фокусе на поле?

LOL, вы аж видео записали, а код приложить было не судьба.

Я с таким не сталкивался за всё время. Похоже на проблему, привязанную либо на баг браузера какой-то специфичной версии, либо на ошибку из-за каких-то манипуляций с JS, которые меняют либо CSS, либо позиционирование.

Можно ли так сверстать без JS?

sorry_i_noob, наверное, потому что знает, как работают свойства CSS и умеет применять их на практике?

Не корректно работает calc(), что делать?

То, что вы используете препроцессор, нужно писать в теле вопроса, тогда бы вам и помогли сразу.

Webpack оптимизация стилей, классов?

VegasChickiChicki, в автоматизации склейки одинаковых свойств с сохранением каскадности.

Есть ли способ реализовать обтекание соседнего элемента другим?

Василий Хрягин, вы о CSS Shapes, которых пока нет в браузерах полноценно. Года через 3 сможете так делать, когда большинство реальных браузеров будет их поддерживать нормально и когда будет возможность делать из блока автоматическую форму:
https://caniuse.com/#search=Shape
https://youtu.be/pOB75oTNhw0

Пока что никаких форм, кроме прямоугольных, в обтекании участвовать не может, если вы хотите полноценной поддержки. И то это всё для текста. Блоки же своей прямоугольной натуры не лишаются.

Делать pixelperfect ломая поведение flexbox или же делать правильно flexbox ломая pixelperfect?

lamer350, согласен полностью. Говорю это и как дизайнер, и как верстальщик.

Когда одному верстальщику сказал, что сетка бывает не только от Bootstrap, он начал спорить. И я понял, что с ним не по пути.

Ну а вообще, это классика, связанная с тем, что людям лень делать что-то иное или вообще что-то в целом делать. Такая же тема с программистами, когда отдаёшь вёрстку, начинаются недовольства, мол, нельзя ли убрать отсюда что-то, оттуда то-то и т. п.

Со всеми, короче, это происходит. Часто это просто лень, чем техническая необходимость. Так что — это норма, главное, чтобы думать умели :))

Делать pixelperfect ломая поведение flexbox или же делать правильно flexbox ломая pixelperfect?

lamer350, поверьте, в любом деле, если нужно что-то хорошо делать, мозги применять нужно. Полгода искал двух верстальщиков в команду, которые умеют думать. Ещё столько же искал программистов, которые умеют делать ровно то же самое.

Сдвиг и возврат блока под раскрывающимся меню?

Сергей delphinpro, LOL, сбор ведьм-программистов объявляю открытым.

Сдвиг и возврат блока под раскрывающимся меню?

Как-то можно решить, но мы об этом никогда не узнаем.

Как выровнять по высоте эти блоки?

Код где?

Как оптимизировать запись SCSS?

Дополню, что тут используется BEM, а зачем в случае BEM вложенные селекторы? Правильно, не нужны, поэтому , если сдедовать первой структуре, следует использовать @at-root в дополнении к переменной с именем компонента.

.list {
    $self: &; // я люблю так записывать имя компонента, как и западные товарищи

    @at-root #{$self}__item {

        &:first-child {

            #{$self}__link { // тут @at-root не нужен, ибо вложенность нужно сохранить
                //
            }

        }

        @at-root #{$self}__smth {
          //
        }

    }

    @at-root #{$self}__link {
      //
    }

}

Это будет генерировать вот это на выходе, без лишней вложенности:

.list {
    //
}

.list__item {
    //
}

.list__item:first-child .list__link {
    //
}

.list__smth {
    //
}

.list__link {
    //
}

Как можно реализовать блок с рассадкой людей в зале?

Конкретно это можно спокойно сверстать. Блоки, контейнеры и куча блоков (посадочные места). У вас там всё прямоугольное и схематичное, т. е. не сохраняет, как я вижу, геометрию зала.

SVG — то же самое. SVG — это код:
https://medium.com/@mattcroak718/creating-an-inter...

Как сделать чтобы placeholder был сверху поля ввода?

Артем фамилия, спасибо :))

Как сделать чтобы placeholder был сверху поля ввода?

Артем фамилия, короче, типа того, зачем тут что-то скрывать?


Или так, для доступности, с label:


Нужна анимация? JS в помощь:
https://speckyboy.com/floating-form-label-plugins/

Пока что не используйте CSS-метод а-ля этого, ибо не все браузеры нормально не работают с этим input:placeholder-shown. Или вообще не работают. Ну а так, через пару лет можно везде спокойно использовать CSS, чтобы делать так:

Как сделать чтобы placeholder был сверху поля ввода?

Артем фамилия, а зачем он должен в вашем случае скрываться, когда он не мешает вводу текста?

Ну а так, если нужна анимация и т. п., то пока на CSS нельзя пользоваться одним свойством, которое проверяет наличие заполненности поля, оно экспериментальное. Ваш выход JS.

Опять же, я не знаю, зачем вам это в вашем случае.

Как сделать чтобы placeholder был сверху поля ввода?

natojezlo, да? Ну вот задал:

Как сделать чтобы placeholder был сверху поля ввода?

С какого перепуга он по-умолчанию слева наверху? :))


Он там никогда не был.

Артем фамилия, чтобы достичь этого эффекта, вам нужно создать вручную отдельный элемент (span, div, label) с вашем текстом и абсолютно позиционировать его поверх input'а внутри общего родительского контейнера.

Если будете использовать именно тег label, убедитесь, что он вам не нужен в качестве именно label.

Какой должен быть подход к выбору архитектуры интернет-магазина?

Вам вопрос лучше разбить на несколько.

Про мобильную версию.
Сомневаюсь, что у вас OZON планируется, поэтому адаптивность вам более чем подойдёт. Но тут зависит от степени структурной разницы frontend'a десктопной и мобильной версий. Но делать две разные версии и вообще дизайн — у вас не хватит бюджета, о чём ниже.

Про бюджет.
С учётом бюджета от готовых решений вам никуда не деться. Первой жертвой будет движок, поэтому выбирайте любой популярный движок. Второй жертвой, очевидно, — весь frontend: дизайн и шаблон. (Третьей жертвой будет ваш сосед. Шучу.)

P. S. Про Bitrix. Разработка и доработка Bitrix — достаточно долгие и дорогие штуки. Готовые решения, как правило, ещё более косо сделаны, чем для того же WordPress.

Проблема с браузером хром?

С Chrome всё в порядке.

Текст в консоли Chrome можно спокойно красить и т. п. с помощью CSS:
css.yoksel.ru/funny-little-console

Смотрите на вашем ресурсе причину этих сообщений в index.js.