Телеграмм чат группы tpverstakchat страница 9896

Size: a a a

Чат — Типичный Верстальщик

2020 July 13

Gynobibliophob in Чат — Типичный Верстальщик

.header {
background-image: url(../img/header__bg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 100vh;

источник

23:00пожаловаться #1

BJIAST in Чат — Типичный Верстальщик

Gynobibliophob

Нет, я создал блок обёртку, внутри него хедер и внутрь хедера блок в котором максимальная ширина

Мета тег вьюпорт

источник

23:14пожаловаться #2

Vladislav Che 🔹 in Чат — Типичный Верстальщик

Gynobibliophob

Нет, я создал блок обёртку, внутри него хедер и внутрь хедера блок в котором максимальная ширина

Мета тег пропиши с именем вьюпорт, а для боди пропиши min-width длина контейнера в пикселях

источник

23:20пожаловаться #3

Vladislav Che 🔹 in Чат — Типичный Верстальщик

Ну это самый примитивный вариант, в идеале нужно смотреть какой элемент вылезает за границы и переписать каждому новые длины и расположение под каждый брекпоинт медиа запроса

источник

23:21пожаловаться #4

Vladislav Che 🔹 in Чат — Типичный Верстальщик

Gynobibliophob

Нет, я создал блок обёртку, внутри него хедер и внутрь хедера блок в котором максимальная ширина

В HTML:
<meta name="viewport" content="width=1170px">

В CSS:
body {
min-width: 1170px;
}

источник

23:28пожаловаться #5

Vladislav Che 🔹 in Чат — Типичный Верстальщик

Ну соответственно 1170 поменяй на свое значение

источник

23:28пожаловаться #6

Gynobibliophob in Чат — Типичный Верстальщик

Спасибо, сейчас попробую

источник

23:34пожаловаться #7

BJIAST in Чат — Типичный Верстальщик

Зачем задавать для самого боди такую ширину это неправильно

источник

23:45пожаловаться #8

BJIAST in Чат — Типичный Верстальщик

На моб будет тоже 1100 пикселей и что тогда. Если там 365 например всего ширина устройства

источник

23:46пожаловаться #9

BJIAST in Чат — Типичный Верстальщик

Вьюпорт то тоже обычно по ширине устройства пишут. Костыль ка то

источник

23:49пожаловаться #10

2020 July 14

Gynobibliophob in Чат — Типичный Верстальщик

Обычно я не сталкивался с такой проблемой, viewport был равен ширине устройства (view-width) по умолчанию, точно не припомню. В итоге поменял на ширину контента. Через медиа запросы поменял max-width на 300-350. И в итоге текст вмешается в ширину экрана, но остаётся пространство по горизонтали. Ищу проблему через панель разработчика, завтра продолжу лечить.

источник

02:22пожаловаться #11

Vladislav Che 🔹 in Чат — Типичный Верстальщик

BJIAST

Вьюпорт то тоже обычно по ширине устройства пишут. Костыль ка то

Конечно костыль, ему надо каждый элемент адаптировать, но как я понял он хотел максимально быстро и просто все сделать , только вот не получалось

источник

08:42пожаловаться #12

BJIAST in Чат — Типичный Верстальщик

Vladislav Che 🔹

Ну банально проблема в другом и её надо решать правильно. Что не будет даже дольше

источник

08:43пожаловаться #13

BJIAST in Чат — Типичный Верстальщик

Либо вьюпорт либо банально там шрифт новрап 50 размера либо все вместе либо ширина где фиксинованая. Причин масса)

источник

08:44пожаловаться #14

Vladislav Che 🔹 in Чат — Типичный Верстальщик

BJIAST

Ну банально проблема в другом и её надо решать правильно. Что не будет даже дольше

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

источник

08:46пожаловаться #15

Оксана in Чат — Типичный Верстальщик

IMG_4992.MP4

(1.91 Мб)

Привет) сейчас у меня при заполнении фокус переходит к следующему инпут. А можете подсказать почему в сафари так прыгает? На андройде нормально все

источник

09:18пожаловаться #16

Евгений in Чат — Типичный Верстальщик

Ребят, кто-нибудь пользовался owl-carousel?
Почему этот код (responsive) работает при перезагрузке страницы. Но не работает при изменении ширины экрана?

$('.sect-rewards').owlCarousel({
    items: 3,
    autoHeight: false,
    mouseDrag: false,
    touchDrag: true,
    dots: false,
    loop: false,
    autoplay: false,
    autoplayTimeout: 3000,
    autoplayHoverPause: true,
    nav: true,
    responsive: {
        1200: {
            items: 3,
            margin: 40,
        },
        1500: {
            items: 4,
            margin: 94,
        }
    }
});

источник

10:57пожаловаться #17

Оксана in Чат — Типичный Верстальщик

Привет. А как вы отключаете скроллинг странице при открытом попап?

источник

10:57пожаловаться #18

Vlad Is Love in Чат — Типичный Верстальщик

Евгений

$('.sect-rewards').owlCarousel({
    items: 3,
    autoHeight: false,
    mouseDrag: false,
    touchDrag: true,
    dots: false,
    loop: false,
    autoplay: false,
    autoplayTimeout: 3000,
    autoplayHoverPause: true,
    nav: true,
    responsive: {
        1200: {
            items: 3,
            margin: 40,
        },
        1500: {
            items: 4,
            margin: 94,
        }
    }
});

Ты инициируешь карусель с определенной шириной и карусель уже с этим работает. Нужно заново вызывать карусель при изменении ширины

источник

11:16пожаловаться #19

Оксана in Чат — Типичный Верстальщик

Евгений

$('.sect-rewards').owlCarousel({
    items: 3,
    autoHeight: false,
    mouseDrag: false,
    touchDrag: true,
    dots: false,
    loop: false,
    autoplay: false,
    autoplayTimeout: 3000,
    autoplayHoverPause: true,
    nav: true,
    responsive: {
        1200: {
            items: 3,
            margin: 40,
        },
        1500: {
            items: 4,
            margin: 94,
        }
    }
});

все должно работать без перезагрузки страницы

источник

11:29пожаловаться #20