#8 Верстка сайта с нуля для начинающих | Адаптивная верстка

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ธ.ค. 2024

ความคิดเห็น • 239

  • @BrainsCloud
    @BrainsCloud  5 ปีที่แล้ว +17

    "00:22" - Мета тег
    "01:47" - Про медиа запросы
    "02:45" - Пишем первый медиа запрос
    "05:10" - Адаптируем intro
    "11:45" - Адаптируем шапку секций
    "14:30" - Адаптируем карточки
    "19:18" - Адаптируем блок статистики
    "24:45" - Адаптируем блок сервисов
    "31:33" - Адаптируем блок с девайсами

  • @evgeniynikolaev2165
    @evgeniynikolaev2165 3 ปีที่แล้ว +84

    Если браузере в режиме разработчика не масштабирует сайт под ваши установленные размеры окна - обрезает, а не адаптирует, то попробуйте это:

    • @ДмитрийКапущак-э4у
      @ДмитрийКапущак-э4у 3 ปีที่แล้ว +4

      Огромное спасибо, час возился не нашел причины)

    • @uproot3745
      @uproot3745 3 ปีที่แล้ว +1

      Спасибо брачо, ты спас мне жизнь.

    • @Storos
      @Storos 3 ปีที่แล้ว

      Спасибо за помощь!)

    • @nataliatarasik9576
      @nataliatarasik9576 3 ปีที่แล้ว

      огромное спасибо! это мучило меня очень долго)

    • @vadimkiryanov4933
      @vadimkiryanov4933 3 ปีที่แล้ว

      Огромное спасибо)

  • @СергейЗемлянин-э9д
    @СергейЗемлянин-э9д 4 ปีที่แล้ว +42

    Золотая середина между "кашкой" для новичков и кучей сложного и нудного материала. Кому нужно, тот гуглит, спасибо за уроки, ты молодец.

  • @ЮлияЦыганенко-о3б
    @ЮлияЦыганенко-о3б 4 ปีที่แล้ว +11

    Не могу подобрать нужных слов, чтобы сказать Вам ОГРОМЕЗНЕЙШЕЕ СПАСИБО!!!!!!!!!!!!! Вы - супер ментор, супер-специалист!!!!!!!! Было безумно интересно и познавательно!!!!!!

  • @alexfleur
    @alexfleur 5 ปีที่แล้ว +67

    Я верстаю с вами, если что...Ребят, пишите комменты, чтобы автор видел отклик)))

    • @BrainsCloud
      @BrainsCloud  5 ปีที่แล้ว +14

      Спасибо за призыв, это действительно важно )

  • @innml7751
    @innml7751 3 ปีที่แล้ว +12

    Наконец-то!!! Две недели верстки и я дошла до адаптива. Несколько раз хотела бросить))) Спасибо за такие замечательные уроки. Очень доходчиво все показано. Приятно слушать. Один из лучших учителей в русском TH-cam.

    • @АхмедЛобов
      @АхмедЛобов ปีที่แล้ว

      Какие успехи спустя два года?

    • @innml7751
      @innml7751 ปีที่แล้ว

      @@АхмедЛобов отправила сына учиться программированию 😆 решила, что у него лучше получится, а в 45 это слишком сложно и долго, ушла в старую сферу

  • @СергейГуляев-о3п
    @СергейГуляев-о3п 2 ปีที่แล้ว +1

    В очередной раз благодарю за видео!
    Кто пишет только сейчас: У меня были проблемы с первым запросом. Удалось решить так:
    @media (max-device-width: 1200px). Добавил слово device, видимо поменялась документация

  • @muhanjan4437
    @muhanjan4437 5 ปีที่แล้ว +29

    Спасибо за уроки , ЗДОРОВЬЯ тебе !!!

  • @utkirkurbanov8241
    @utkirkurbanov8241 2 ปีที่แล้ว +1

    Thanks to the BrainsCloud team for these videos. I take huge experiences...🙂

  • @jahzoviy260
    @jahzoviy260 5 ปีที่แล้ว +7

    Самые понятные уроки по этой теме! Сердечная благодарность.

  • @DK-pk5ri
    @DK-pk5ri 5 ปีที่แล้ว +3

    Просмотрел все уроки. Хочу выразить свои признание и благодарность. Спасибо большое, по-больше бы таких полезных каналов, а не всякого детского мусора

  • @endlesslysorrow
    @endlesslysorrow 4 ปีที่แล้ว +6

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

  • @СветланаВербанова
    @СветланаВербанова 3 ปีที่แล้ว +4

    Огромное спасибо! просто нет слов, на сколько вы классно все обьясняйте и четко все делайте!

  • @timofey2672
    @timofey2672 4 ปีที่แล้ว +7

    34:26, так я объясняю свои действия заказчикам на фрилансе :D, пересматриваю плейлист, попутно реализовываю весь функционал на реакт, редакс, тайпскрипт, помню, как десять +- месяцев назад смотрел этот плейлист и верстал на чистом html, css)
    Спасибо, Дима, благодаря твоим видео довольно быстро вырос в вебе.

    • @raccoon1399
      @raccoon1399 4 ปีที่แล้ว

      скажите пожалуйста, как вы учили JS? может есть какие-то курсы, не могли бы вы посоветовать совсем новичку в этом деле?

    • @timofey2672
      @timofey2672 4 ปีที่แล้ว +7

      @@raccoon1399, привет, есть канал Владилен Минин, там есть курс по JavaScript за 6 часов, его можешь посмотреть, основы поймешь, на том же канале и про другие технологии JavaScript много вещей.

    • @raccoon1399
      @raccoon1399 4 ปีที่แล้ว

      @@timofey2672 спасибо большое!) надеюсь пойму

  • @АнастасияНечаева-к6ф
    @АнастасияНечаева-к6ф 4 ปีที่แล้ว +6

    каждый день с вами и вашими уроками! Спасибо вам!

  • @Sun2rw
    @Sun2rw 2 ปีที่แล้ว +1

    Привет. Спасибо за курс. Просмотрел и всё повторил. Всё было очень круто. Лайк, подписка, однозначно.

  • @juliatutaeva9832
    @juliatutaeva9832 4 ปีที่แล้ว +5

    Огромное спасибо! Отличный опыт в вёрстке, когда изучил теорию и перешёл к практике. Спасибо, Дмитрий!

  • @alex_smith3875
    @alex_smith3875 4 ปีที่แล้ว +6

    Чертовски быстрая вёрстка. Спасибо за хорошие уроки

  • @KuKu_RuKu88
    @KuKu_RuKu88 5 ปีที่แล้ว +7

    Спасибо за урок! Непростые эти медиа запросы )))

  • @Burovasofia
    @Burovasofia 2 ปีที่แล้ว +2

    Дмитрий, спасибо вам за вашу работу!

  • @anastas1kus
    @anastas1kus 4 ปีที่แล้ว +1

    Жалею в этой жизни только об одном - как я не увидела этот канал раньше! 😂 Но время пришло! Спасибо тебе огромное за канал и такой информативный мини-курс ❤

  • @ВикторКашин-е9р
    @ВикторКашин-е9р 5 ปีที่แล้ว +5

    Дмитрий спасибо вам за вашу работу,очень классные уроки.Желаю процветания вашему каналу и продолжайте в том же духе.

  • @КанатБолотбеков-ъ5я
    @КанатБолотбеков-ъ5я 3 ปีที่แล้ว +1

    Спасибо Дмитрий , обучаюсь на ваших видео!

  • @sergsergey4251
    @sergsergey4251 4 ปีที่แล้ว +10

    Как всегда - отличное видео, спасибо!

  • @ИринаСимакова-д8е
    @ИринаСимакова-д8е 5 ปีที่แล้ว +4

    Спасибо за курс. Все доступно и хорошо воспринимается с нуля. Но у меня возникло затруднение с тегом в области . Сработало только при таком условии:

    • @BrainsCloud
      @BrainsCloud  5 ปีที่แล้ว

      отменять возможность зума для пользователя не очень хорошая идея

    • @ИринаСимакова-д8е
      @ИринаСимакова-д8е 5 ปีที่แล้ว

      @@BrainsCloud Спасибо, поменяла.

    • @aliyagaliakhmetova19
      @aliyagaliakhmetova19 4 ปีที่แล้ว +1

      @@stasalsakhanov435 как решили проблему? у меня так же(

    • @aliyagaliakhmetova19
      @aliyagaliakhmetova19 4 ปีที่แล้ว +1

      Как в итоге прописали в коде? такая же проблема(

    • @МихаилШпатен
      @МихаилШпатен 3 ปีที่แล้ว

      Здравствуйте. Как решили вашу проблему с тем, что без "user-scalable=no" не получается адекватно изменять размеры "устройства"?

  • @amalkadirov4703
    @amalkadirov4703 3 ปีที่แล้ว +1

    спасибо большое за ваши видео, делал все по вашим урокам и теперь есть примерное понимание как разрабатывать сайт))))

  • @ВикторЧеберячко
    @ВикторЧеберячко 5 ปีที่แล้ว +3

    Спасибо - уроки информативные, но размеры для шрифтов лучше ставить в относительных единицах в em или rem об этом много статей в интернете написано, так легче будет менять стили сайта, если заказчик к примеру захочет уменьшить или увеличить весь шрифт на сайте. Тогда достаточно будет изменить размер базового шрифта в body или html а не подбирать потом его для каждого элемента на сайте. Это для новичков. Я и сам новичок, но как показывает практика, если хочешь хорошо разобраться в чем-то, обучи этому другого)))

  • @Skilling27
    @Skilling27 2 ปีที่แล้ว

    Дошел все-таки)), спасибо тебе, очень круто объясняешь, без воды и прочей ненужной инфы)

  • @Сергей-э8о6м
    @Сергей-э8о6м 4 ปีที่แล้ว +4

    Автору огромное спасибо за годный контент и старания!!!!!! Ставлю жирный лайк!!!!

  • @yomzfka
    @yomzfka 3 ปีที่แล้ว +1

    Каждый урок смотрю с удовольствием ))

  • @NoName-io4lx
    @NoName-io4lx 3 ปีที่แล้ว +2

    15:34 - а почему мы просто не использовали совместно со space-between ширину .card__item {width: 32%;} ?
    Дима, спасибо за уроки! Ты лучший практикующий учитель данному ремеслу на русском TH-cam!!

  • @lugaang
    @lugaang 2 ปีที่แล้ว

    Делаю и получаю удовольствие)) Спасибо

  • @MrZorg23
    @MrZorg23 5 ปีที่แล้ว +4

    Спасибо, оч. много полезной информации! Особенно понравилась фишка с отрицательными margin у родительского элемента и положительными padding у дочерних элементов. Раньше делал просто margin-left и приходилось убирать последний margin-left с помощью last-childe.

  • @КириллИнтеров
    @КириллИнтеров 4 ปีที่แล้ว +2

    Спасибо! Содержательно, коротко, и ясно!

  • @tanyamarushka7251
    @tanyamarushka7251 3 ปีที่แล้ว +1

    Как всегда спасибо за урок!

  • @nikita.moskovskiy
    @nikita.moskovskiy 3 ปีที่แล้ว

    учусь по твоим урока. много нового узнал, спасибо. продолжай)

  • @mik_404
    @mik_404 4 ปีที่แล้ว

    Спасибо за уроки!
    Научился верстать у вас)

  • @marynakosiv3750
    @marynakosiv3750 5 ปีที่แล้ว +4

    лучшие уроки!!! а можно видео разбор с разными вариантами адаптивности? хотя бы принципы или теорию))

    • @BrainsCloud
      @BrainsCloud  5 ปีที่แล้ว +1

      посмотрите верстку сайта activebox, там я немного подробней рассказывал

  • @milos1053
    @milos1053 4 ปีที่แล้ว +1

    Верстку вместе с тобой повторяю, надеюсь будет толк, все что не понял гуглю, но иногда оочень много времени уходит на то что бы понять что ты сделал)

    • @PIRAKAS666
      @PIRAKAS666 4 ปีที่แล้ว +1

      Тогда для начала разберись с основами по CSS и HTML.

    • @milos1053
      @milos1053 4 ปีที่แล้ว

      @@PIRAKAS666 В принципе уже разобрался но иногда не все понятно до конца, долго не мог понять как Дмитрий делает структуру HTML и почему столько вложений, пришлось остановиться и пойти читать БЭМ методологию. Вообще как по мне, данные видео учат само образовываться и это круто. Посмотрим что дальше будет)

  • @yevheniidodiak3644
    @yevheniidodiak3644 3 ปีที่แล้ว

    Спасибо Вам за урок . Верстаю с Вами =)

  • @madalinamanole5124
    @madalinamanole5124 4 ปีที่แล้ว +2

    Спасибо за урок!

  • @skvor83
    @skvor83 3 ปีที่แล้ว

    залип на видео, спасибо за труды!

  • @Anahitacode
    @Anahitacode 5 ปีที่แล้ว

    Я - фанат этого канала. Один из лучших контентов на ютубе. Люди, кто дожил до этого видоса, поделитесь, нет ли проблем с ссылкой на fontawesome. У меня гугл ошибку выдает. Что-то про SAMESITE атрибут, говорит, что сайт его не имеет.

    • @Anahitacode
      @Anahitacode 5 ปีที่แล้ว

      Andrey Abramchuk спасибо

  • @azizazizov9339
    @azizazizov9339 4 ปีที่แล้ว

    padding sleft :) спасибо за урок

  • @димаострый-э5ъ
    @димаострый-э5ъ 4 ปีที่แล้ว +1

    это лучший человек !!!

  • @kayaosato9289
    @kayaosato9289 2 ปีที่แล้ว +1

    Если у кого-то не получается убрать белую полоску справа, попробуйте вот это
    html,body{
    overflow-x: hidden
    }
    почитайте про это свойство

    • @stacyxq
      @stacyxq 2 ปีที่แล้ว

      спасибо, помог

  • @27tamerlan
    @27tamerlan 4 ปีที่แล้ว +1

    Будь здоров!

  • @Николай-с2д5в
    @Николай-с2д5в 4 ปีที่แล้ว +4

    Капец геморой) Думал что как то само всё адаптируется. Я не программист ни разу, но с интересом просмотрел все уроки и ещё дальше досмотрю. Раз столько уроков отсмотрел, может попробую сайт собрать. Просто интересно.

  • @anticheater5049
    @anticheater5049 4 ปีที่แล้ว +2

    27:50 . При разрешении 973х729 у меня не влезает весь текст от Creativity и Digital в экран справа. А слева не влезают значки. А у вас влезают. Скачал ваш код, тоже самое. Что я делаю не так, не понимаю? Адаптивная вёрстка сложная штука.

    • @itssimple9217
      @itssimple9217 3 ปีที่แล้ว

      Тоже самое случилось и у меня мой друг. Было это на виндовс, никак ни мог настроить экран адаптивной. Снес Винду, установил линукс elementary к статье очень хороший дистр, на нем настроил очень легко, рекомендую. Дай мне свой вк, продвинимся!

  • @dominic9040
    @dominic9040 3 ปีที่แล้ว

    6 дней и я дошел до адаптации, надеюсь прогресс не будет стоять на месте, спасибо за ваши уроки!!!

    • @ВалерійПострибайло
      @ВалерійПострибайло 2 ปีที่แล้ว

      Как твои успехи сейчас?, очень интересно)

    • @dominic9040
      @dominic9040 2 ปีที่แล้ว

      @@ВалерійПострибайло после этих видео поверстал еще пару сайтов, после этого из-за войны приостановился прогресс на пол года где-то, потом сверстал один лендинг, чтобы возобновить знания+-, начал учить js, react, redux toolkit, ts, сейчас дописываю свой пет проект, и буду искать первую работу в it

    • @dominic9040
      @dominic9040 2 ปีที่แล้ว +3

      @@ВалерійПострибайло все что я подчеркнул для себя за этот год - никогда не сдаваться, да, иногда нужны перерывы, может даже большие, но дисциплина>>>, надо её выстраивать и тогда ты добъешься любой цели

    • @ВалерійПострибайло
      @ВалерійПострибайло 2 ปีที่แล้ว

      @@dominic9040 ты меня смотивировал🔥

  • @myprogs
    @myprogs 4 ปีที่แล้ว +9

    Emmet код для font-size для, к примеру, 20 пикселей = fz20px

  • @NeedForHeavyMetal
    @NeedForHeavyMetal 3 ปีที่แล้ว

    Всё круто!!! спасибо большое!))

  • @daeriofrixell199
    @daeriofrixell199 4 ปีที่แล้ว +2

    шел 107 день вёрстки мого. Медленно, но верно :DDD

  • @Тини
    @Тини 4 ปีที่แล้ว +2

    Спасибо большое!

  • @maingroon
    @maingroon 5 ปีที่แล้ว +6

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

    • @BrainsCloud
      @BrainsCloud  5 ปีที่แล้ว +3

      Alex Kron досмотреть все уроки по адаптации

    • @МихаилШпатен
      @МихаилШпатен 3 ปีที่แล้ว

      У меня такая же проблема. Вы разобрались в чём дело?

  • @PiterProduction
    @PiterProduction ปีที่แล้ว

    Большое спасибо)))

  • @asadbekkenjabaev
    @asadbekkenjabaev 3 ปีที่แล้ว +1

    Super 👍👍👍

  • @FunnyHoney-Dinara
    @FunnyHoney-Dinara 4 ปีที่แล้ว +4

    Подскажите, пожалуйста, как убрать горизонтальную прокрутку при уменьшении размера экрана

    • @sonyboy4413
      @sonyboy4413 4 ปีที่แล้ว +2

      Скорее всего, у тебя неверно задан box-sizing, в обнуляющих стилях. Передвинься в самый верх CSS-кода и скопируй код для *, *:after и *:before. Сам сталкивался с такой проблемой, решал 40 минут :)

    • @awenn2015
      @awenn2015 4 ปีที่แล้ว +1

      @@sonyboy4413 мне казалось его нужно всегда по умолчанию указывать box-sizing border-box

  • @VoLaND0303
    @VoLaND0303 4 ปีที่แล้ว

    лучшие уроки

  • @DerAleksey
    @DerAleksey 4 ปีที่แล้ว

    Эх, не оторваться...

  • @thedikov175
    @thedikov175 3 ปีที่แล้ว +2

    Привет, очень нравится твои уроки)
    Дошёл пока что только до 8го урока
    Надеюсь ты прочитаешь и поможешь мне)
    При адаптации текст не съезжает как у тебя 11:54 , а просто а просто уменьшается, не переводя текст на новую строку. Помоги пожалуйста)

  • @clipfailer
    @clipfailer 8 วันที่ผ่านมา

    Не понял момента с секцией About, а точнее карточки. Мы во втором уроке когда её верстали, использовали именования about__item и т.д. а тут резко пошло card, и стили вообще по-другому выглядят. И у меня теперь проблемы: задний фон шире картинки, хотя я поправил, как в видео.

  • @roman_babenko
    @roman_babenko 3 ปีที่แล้ว

    Оч полезное видео!

  • @romanro8630
    @romanro8630 4 ปีที่แล้ว

    Спасибо! Всё круто!

  • @clickabelno
    @clickabelno 5 ปีที่แล้ว +1

    ставлю царский лайк!!)

  • @kirillvolkov2666
    @kirillvolkov2666 4 ปีที่แล้ว +1

    почему не работает @media (max-width: 770px){
    .intro__suptitle{
    font-size:20px;
    }
    .intro__title{
    font-size: 40px;
    }

    }
    все остальные медиа запросы видет кроме последних

  • @KuKu_RuKu88
    @KuKu_RuKu88 5 ปีที่แล้ว +2

    подскажите еще, как боретесь с Live preview, у меня страница как шальная в браузере скачет, а Вас все ровненько стоит ???!!!!

    • @BrainsCloud
      @BrainsCloud  5 ปีที่แล้ว +2

      Никак, все работает как работает

  • @viktorkhekalo6154
    @viktorkhekalo6154 4 ปีที่แล้ว +1

    Здравствуй. При установленном @media (max-width: 1230px) в хроме при проверке он (breakpoint) срабатывает только на отметке 1107px, в мозиле и brackets live preview работает корректно (срабатывает на 1230). В чем может быть причина?

    • @viktorkhekalo6154
      @viktorkhekalo6154 4 ปีที่แล้ว

      Разобрался, причина определена, можно не отвечать.

    • @YotaGelione
      @YotaGelione 2 ปีที่แล้ว

      @@viktorkhekalo6154 Здравствуй, у меня плохожая проблема, медиазапрос на 770px не устанавливается только на 1230 и на 990, в чём может быть проблема?

  • @romaroman8204
    @romaroman8204 5 ปีที่แล้ว

    я в блоке wedo просто поставил картинку сверху так вроде тоже норм
    .wedo__img{
    position: static;
    width: 100%;
    padding-bottom: 10px;
    }

  • @anticheater5049
    @anticheater5049 4 ปีที่แล้ว

    Вопрос. Таймкод 05:09 . У меня при разрешении 1196х901 в браузере написано, что контейнер 1166х510, а у вас 1151х602. Скачал ВАШИ файлы урока по ссылке в описании, открыл их через опен сервер и phpstorm и те же самые цифры, что у меня были в с моими файлами. И вообще часто разногласия по ходу всего видео в цифрах.
    Использовал гугл хром, а также мазилу и оперу. Если важно, то я с винды 10, размер экрана 17,3 дюйма. Ноутбук. Разрешение моего экрана 1920х1080

    • @DeIgado95
      @DeIgado95 4 ปีที่แล้ว

      это как раз из-за разрешения экрана. Уверен, если код аналогичен и в инспекторе кода поставить разрешение идентичное разрешению автора, то ширина будет аналогичной

  • @kishmish7346
    @kishmish7346 5 ปีที่แล้ว +3

    Живи вечно

  • @ПажилойМаслач-э8м
    @ПажилойМаслач-э8м 4 ปีที่แล้ว +1

    спасибо большое!

  • @ЮлияКрышевич
    @ЮлияКрышевич 3 ปีที่แล้ว

    нахимичила чето вначале, и у меня постоянно съезжает наверх интро, у меня тут уже margin-top 8000px.. адаптивная верстка вообще нереально, всё разъезжается(( хотя на обычном масштабе всё красиво. Кажется нужно начинать новый сайт и ничего не путать больше, а то не понимаю как исправить(

  • @АндрейШестаков-х6и
    @АндрейШестаков-х6и 4 ปีที่แล้ว +1

    Столкнулся с проблемой: текст в теге services__item идёт по одному слову в строку по вертикали .
    Всего 2 строки с разделяющей линией, и вот в каждой из них 1-ый пункт нормально отображается, а 2-ой и 3-ий как я уже написал выше

  • @ГригорийАстраханов
    @ГригорийАстраханов 3 ปีที่แล้ว

    перепроверил несколько раз, но так и не понял, почему карточки не уменьшаются пропорционально ширине экрана
    с чем это мб связано?

  • @bulletsFly
    @bulletsFly 3 ปีที่แล้ว

    нельзя текст на всем сайте при каждом медиазапросе прибавлять/отнимать в %?

  • @BiGSplush
    @BiGSplush 5 ปีที่แล้ว

    Почему в section, header является div'ом а не собственно , ведь семантически не запрещено использовать несколько header тегов в одном документе??

  • @Сергей-э8о6м
    @Сергей-э8о6м 4 ปีที่แล้ว

    Всем привет!!! Ребята, а для винды есть подобные фишки в браузере чтоб примерять к телефону сайт прямо в браузере ?

  • @mayllu
    @mayllu 3 ปีที่แล้ว

    почему после того как делаю card столбиками он вылезает из своего блока и залезает на нижние?

  • @АлексейРемизов-н3х
    @АлексейРемизов-н3х 5 ปีที่แล้ว +2

    В CSS при @media (max-width: 990px) всё норм, как только прописываю 770px или меньше , ничего не работает , в чём причина?? И ещё в HTML тег №7 это что ??Про него ничего в начале урока не сказано

    • @marinaromanova4999
      @marinaromanova4999 5 ปีที่แล้ว +1

      Поддерживаю, та же проблема.

    • @marinaromanova4999
      @marinaromanova4999 5 ปีที่แล้ว +1

      Нашла способ как можно исправить! Попробуйте обернуть все медиа-запросы, которые меньще 990 в один. То есть пишите запрос для 1230 в { } скобках самостоятельно, а на 990 открывете {, прописываете стили для 990, а все следующие более маленькие медиа запросы прописываете ниже и только после самого последнего закрываете медиа-запрос на 990 }.

    • @mr.predator8208
      @mr.predator8208 5 ปีที่แล้ว

      @@marinaromanova4999 А можно пожалуйста пример кода?? а то слишком сложно написано
      Либо просто я не понял))
      Но все равно дайте пожалуйста пример кода, если не трудно)
      Заранее спасибо

    • @dmytroguzhva8381
      @dmytroguzhva8381 4 ปีที่แล้ว

      Посмотри верно ли ты прописал этот код :
      у меня была тут ошибка в знаках "- и ="

  • @nelyhartenyan3734
    @nelyhartenyan3734 4 ปีที่แล้ว +1

    .container{
    paddin:0 15px;
    .....
    } не работает, с левой есть, а с правой нету. Скажите пожалуйста почему и что делать.

    • @gvadim2850
      @gvadim2850 4 ปีที่แล้ว +2

      padding напиши, у тебя paddin

  • @vatasi7312
    @vatasi7312 3 ปีที่แล้ว

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

  • @forceward
    @forceward 4 ปีที่แล้ว

    Здравствуйте, я только начинаю верстать. Смотрю ваши видео, и они реально мне помогают, спасибо большое.
    У меня есть вопрос: До этого я не открывал сайт в другом устройстве. Сегодня попробовал, но в смартфонах не открывается, хотя в другом компе открылся.
    Не открывается в смысле - браузер только показывает то что написано в html, но в коде привязал и css.
    Не знаете, из-за чего может быть это?

  • @Михайло-з1ц
    @Михайло-з1ц 2 ปีที่แล้ว

    Кто то может помочь, а что делать если слайдер (кнопки) начинаются налезать на секцию при уменьшении окна браузера. Как это все просто зафиксировать? Что бы при уменьшении окна все элементы оставались на своих местах.

  • @worldismine9089
    @worldismine9089 5 ปีที่แล้ว +1

    Каждый раз когда мы прописываем flex-wrap: wrap; у меня слетает то к чему мы прописываем.. ПОЧЕМУ? ПОДСКАЖИТЕ ПОЖАЛУЙСТА. (Ggoogle chrome; firefox; opera). Использую для написания кодов - Dreamweaver2019.
    Выяснил в чем дело, .card_item{
    width: 33%;
    padding: 0 15px; } , когда меняем вместо width: 33%;
    ставим width: 28% все решается... И внизу для @media max-width 770px - укаываем для .card_item{ max-width: 380px;......}

    • @BrainsCloud
      @BrainsCloud  5 ปีที่แล้ว

      Скорее всего у вас не прописано, или прописано с ошибкой, правило box-sizing: border-box; для всех элементов. Будьте внимательны

    • @worldismine9089
      @worldismine9089 5 ปีที่แล้ว

      @@BrainsCloud Спасибо, Огромное... Но в некоторых моментах, масштаб(px; %) приходиться указывать свой..

  • @vitalii4287
    @vitalii4287 4 ปีที่แล้ว

    Дмитрий, здесь в видео ты говоришь, что медиа-запрос нужно писать под блоком, для которого я делаю медиа-запрос и называешь это самым главным правилом. В курсе для новичков ты говорил, что такой способ неудобный, и писать медиа-запросы лучше в конце css файла. Хоть я и понимаю, что не особо важно где их писать, но все таки что выбрать "главное правило" или удобство?

    • @BrainsCloud
      @BrainsCloud  4 ปีที่แล้ว +2

      Вы наверно не правильно поняли, речь шла о том, что медиа-запросы надо писать под, а не в коем случае над основными стилями. И в данном видео я пишу все медиа в самом низу, посмотрите.

  • @revinfedor2329
    @revinfedor2329 5 ปีที่แล้ว +1

    Для services__item width не роботает, но работает max-width

  • @turzvuk
    @turzvuk 5 ปีที่แล้ว +1

    Спасибо!

  • @ruspassinggames1870
    @ruspassinggames1870 4 ปีที่แล้ว

    Появляется белая полоска с права что делать смотрел там виперает .card, но он помещен в контейнер в чем проблема не знаю

  • @wildtube108
    @wildtube108 3 ปีที่แล้ว

    Здравствуйте. Подскажите пожалуйста, делаю изменения по адаптивности вместе с вами и когда вы уменьшаете и увеличиваете свой экран - элементы подстраиваются под ваши действия, а у меня не реагируют. Если я уменьшаю то части секций скрываются по бокам.

  • @whatisloveel
    @whatisloveel 4 ปีที่แล้ว +1

    Когда мы убирали навигацию , она у меня не убирается я проверил правильно ли я набираю все остальное по типу маржин и тд работает, а display: none; нет, с чем это может быть связано??

    • @whatisloveel
      @whatisloveel 4 ปีที่แล้ว

      Пока убрал через опасити 0 , если кто то ответит исправлю

    • @ВадимКороль-ч8й
      @ВадимКороль-ч8й 4 ปีที่แล้ว

      @@whatisloveel @media (max-width: 770px) {
      .nav {
      display: none;
      }
      }
      скопируй

  • @indev_js
    @indev_js ปีที่แล้ว

    шапка секций, а именно красная полоска под тайтлом при разрешении 575px уезжает в левый край, а у Дмитрия она всегда в центре. Подскажите у кого такое было? как фиксили? голову ломаю, понять не могу. UPD: ПОФИКСИЛ

  • @AyratMuxametov
    @AyratMuxametov 4 ปีที่แล้ว +1

    а теперь всё удаляем и делаем сами все сначала)))

  • @ЕвгенийДоровский-э5в
    @ЕвгенийДоровский-э5в 2 ปีที่แล้ว

    Дякую за урок

  • @АлексейГундин-э9о
    @АлексейГундин-э9о 4 ปีที่แล้ว

    В блоке services значение width 33.33333% не корректно работает, из-за того что к ширине плюсуются значения padding. Services_item идут в две колонки. Делаю вёрстку под свой браузер со своими размерами.

    • @BrainsCloud
      @BrainsCloud  4 ปีที่แล้ว +1

      не плюсуются если есть box-sizing: border-box; который прописывали еще в первом уроке, проверьте корректность написания этого правила всем элементам и псевдоэлементам

    • @АлексейГундин-э9о
      @АлексейГундин-э9о 4 ปีที่แล้ว

      @@BrainsCloud Верно сенсей, псевдоэлемент before не так написал )))

  • @КамильМиникеев-г5ъ
    @КамильМиникеев-г5ъ 5 ปีที่แล้ว

    Подскажите пожалуйста, я пишу медиазапрос например на 1230 px, ничего не происходит, если уменьшу экран до 1220 то сработает, выше не работает ; приходится писать в медиазапрос не 1230 а 1240, чтоб все было норм. В чем проблема, никто не знает?

  • @den4icle417
    @den4icle417 3 ปีที่แล้ว

    Видос как всегда информативный!
    Но возникла проблема сразу при начале адаптации. Дело в том что когда пишу (max-width: 990px) то ширина сайта становиться белой, Дмитрий помогите!

  • @aidontis7649
    @aidontis7649 3 ปีที่แล้ว

    Дмитрий, добрый день! в начале урока .container{
    width: 100%;
    max-width: 1200 px;
    margin: 0 auto;} я же ведь тоже написала 1200px, но почему у меня на полный экран показывает, проблема в чем? спасибо!

    • @BrainsCloud
      @BrainsCloud  3 ปีที่แล้ว

      может у вас экран меньше чем 1200 ?

  • @ВикторБарсов-ц3ц
    @ВикторБарсов-ц3ц 5 ปีที่แล้ว +3

    Если уметь верстать так же, как в данном плейлисте, если ещё знать и практиковать препроцессоры, то с такими знаниями можно ли устроиться верстальщиком?

    • @BrainsCloud
      @BrainsCloud  5 ปีที่แล้ว

      Куда-нибудь да можно, пробовать надо

  • @yaroslavbulavin3613
    @yaroslavbulavin3613 5 ปีที่แล้ว +1

    Всем добра и счастья)

    • @BrainsCloud
      @BrainsCloud  5 ปีที่แล้ว +1

      Ярослав Вадимович плохая фича. Нужно найти какой элемент вылезает и создаёт полосу, а не отменять у документа горизонтальную прокрутку. Человек не сможет скролить при зуме на телефоне. Да и стили надо писать в цсс файле, а не в атрибуте.

    • @yaroslavbulavin3613
      @yaroslavbulavin3613 4 ปีที่แล้ว

      @@BrainsCloud спасибо, Дима. Не знаю, что пошло не так, код идентичный