Ответы пользователя по тегу Вёрстка
  • Как исправить внешний вид превью поста?

    @Givandos
    верстка, пыха (прощай, родная), рельсы (вы кто?)
    Попробуйте изменить размер окна, увидите, что Масонри отрабатывает нормально (то есть приводит все в правильный вид). Отсюда я делаю вывод, что у вас первоначальный вызов масонри сделать не корректно - он вызывается ДО того, как были загружены превью видяшек, следовательно и оценить их размер он не может.

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

    @Givandos
    верстка, пыха (прощай, родная), рельсы (вы кто?)
    Первые 3 без особых проблем делаются порезкой фоновой картинки на части.
    Вторую вообще в мобильной версии оставить без стрелочек, не нужны они на узкой экране.

    А вот с облачком, то тут действительно должен думать дизайнер как сделать так, чтоб конкретно это расположение чувачка и облачка смотрелось в размере 300 пикселей по ширине. А так как это практически нереально (будет очень мелко и все детали потеряются), то дизайнер должен придумать как чувачка и облако "разделить" и отображать немного по другому их компоновку в мобильной версии (на узких экранах).
    Ответ написан
    Комментировать
  • Как настроить переход по якорям с других страниц?

    @Givandos
    верстка, пыха (прощай, родная), рельсы (вы кто?)
    Попробуйте в этом направлении посмотреть. Вариант lebonnet тоже имеет право на жизнь, но он не отменяет событие системного скролла.
    $(document).ready(function(){
      $(document).on('scroll', function(event){
        var target = window.location.hash;
        if (typeof hash != 'undefined' && hash != '') {
          event.stopPropogation(); // or event.preventDefault();
          ... // your function from scroll
        }
      });
    });
    Ответ написан
    Комментировать
  • Как сделать одиннаковое расстояние между ссылками в меню?

    @Givandos
    верстка, пыха (прощай, родная), рельсы (вы кто?)
    В фотошопе у вас тексты меняться особо и не должны, это шаблон. Главное нарисовать его так, чтоб верстальщик потом мог четко понять, что между пунктами меню нужно одинаковое растояние не зависимо от длины текста в пункте меню.

    А сама реализация этого на CSS, на мой взгляд, лучше всего будет на flex, с указание выравнивания по ширине.
    Но можно попробовать и через inline-block и снова таки выравнивание по ширине, примерно вот так:

    ul {
      text-align: justify;
    }
    
    ul::after {
      content: "";
      display: inline-block;
      width: 100%;
    }
    
    li {
      display: inline-block;
    }
    Ответ написан
    Комментировать