Ответы пользователя по тегу CSS
  • Не подключается Owl-carousel?

    IIIu6ko
    @IIIu6ko
    Проверь ещё раз пути

    Вот только что подключил, всё работает.
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <link rel="stylesheet" href="OwlCarousel2-2.2.1/dist/assets/owl.carousel.css">
      <link rel="stylesheet" href="OwlCarousel2-2.2.1/dist/assets/owl.theme.default.css">
    </head>
    <body>
      <div class="owl-carousel">
        <div> Your Content </div>
        <div> Your Content </div>
        <div> Your Content </div>
        <div> Your Content </div>
        <div> Your Content </div>
        <div> Your Content </div>
        <div> Your Content </div>
      </div>
    
      <script src="jquery-3.3.1.min.js"></script>
      <script src="OwlCarousel2-2.2.1/dist/owl.carousel.js"></script>
      <script>
        $(".owl-carousel").owlCarousel();
      </script>
    </body>
    </html>


    Структура такая:
    e3sVK2UUQtC-z-OMyc17Mg.jpeg
    Ответ написан
    Комментировать
  • Проблемы с модульным окном, мерцание как убрать?

    IIIu6ko
    @IIIu6ko
    Это из-за того, что при hover'e на .pay-block-packet у Вас стоит transform: scale(1.1);
    Уберите его и всё нормально станет.

    Если хотите scale сохранить, то вынесете блок с модальным окном из блока .pay-block-packet
    Ответ написан
    5 комментариев
  • Как сделать мобильную таблицу с градиентом?

    IIIu6ko
    @IIIu6ko Автор вопроса
    Сам сообразил)

    gradientTable();
    
      $(window).resize(function() {
        gradientTable();
      });
    
      function gradientTable() {
        var tableWidth = $(".table--delivery-method").width();
        var windowSize = $(window).width();
        var widthGradient = $(".table__gradient").width();
        var widthWindowWithoutIndentation = windowSize / 100 * 5;
        var primaryPositionGradient = windowSize - widthWindowWithoutIndentation - widthGradient;
        $(".table__gradient").css("left", primaryPositionGradient + "px");
    
        $(".table__box").scroll(function() {
          if($(this).scrollLeft() >= (tableWidth - windowSize + widthWindowWithoutIndentation)) {
            $(".table__gradient").fadeOut();
          }
          else {
            $(".table__gradient").fadeIn();
            $(".table__gradient").css("left", primaryPositionGradient + $(this).scrollLeft() + "px");
          }
        });
      }
    Ответ написан
    Комментировать
  • Как бороться с проблемой внутренней ссылки?

    IIIu6ko
    @IIIu6ko
    Пару строк на jquery решает проблему.

    var $page = $('html, body');
    $('a[href*="#"]').click(function() {
      $page.animate({
        scrollTop: $($.attr(this, 'href')).offset().top - 60
      }, 1000);
      return false;
    });


    codepen.io/anon/pen/KaLeKg
    Ответ написан
    Комментировать
  • Как реализовать функцию из Remodal.js?

    IIIu6ko
    @IIIu6ko
    В общем. При нажатии на "click" срабатывает js-скрипт
    var $html = $('html');
    var lockedClass = namespacify('is-locked');
    $html.addClass(lockedClass);

    который добавляет тегу html класс remodal-is-locked
    <html class="remodal-is-locked">
    не знаю откуда он remodal цепляет, но это и неважно.

    Ну и этот класс добавляет стиль
    overflow: hidden

    Полезные ссылки:
    https://webref.ru/css/overflow
    htmlbook.ru/faq/kak-ubrat-polosy-prokrutki
    Ответ написан
    1 комментарий
  • Почему Firefox не "видит" шрифт Roboto?

    IIIu6ko
    @IIIu6ko
    Лучше вот так подключай шрифты:
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-Regular.woff2') format('woff2'),
               url('Roboto-Regular.woff') format('woff');
        font-weight: normal;
    }


    Если необходимо bold ещё подключить то меняешь url и font-weight, а название оставляешь тоже.
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-Regular.woff2') format('woff2'),
               url('Roboto-Regular.woff') format('woff');
        font-weight: normal;
    }
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-bold.woff2') format('woff2'),
               url('Roboto-bold.woff') format('woff');
        font-weight: bold;
    }


    Ну и в самих стилях пишешь вот так

    // Если нужен bold
    h1 {
        font-family: Roboto;
        font-weight: bold;
    }
    // Если нужен Regular
    h1 {
        font-family: Roboto;
        font-weight: normal; // Либо можно не писать т.к. по умолчанию стоит
    }


    Собственно все остальные форматы кроме woff и woff2 можешь убрать. Можно ещё добавить ttf если нужна поддержка старых Android.

    Вот кроссбраузерность woff caniuse.com/#feat=woff
    Если уж так нужен ie8, то можно ещё eot подключить, но вряд ли оно того стоит.
    Другие форматы подключаются также в src через запятую, после последнего ; не забудь.

    Вот здесь можешь почитать поподробнее про подключение
    nicothin.pro/page/web-fonts

    woff2 я здесь брал
    https://github.com/FontFaceKit/roboto
    Ответ написан
    Комментировать