Адаптив сайта с нуля до завершения html/css/js Часть 3

Подписаться 84 тыс.

Просмотров 8 тыс.

50% 1

Друзья, третья часть вечеринки. Это адаптив сайта! Погнали дальше!
----------------------------------------
Сайт курса по верстке - from0to1.com.ua/
----------------------------------------
----------------------------------------
Готовая верстка на patreon - / from0to1
Телеграм канал - t.me/from0to1com
----------------------------------------
----------------------------------------
Доп ссылки:
box-sizing: • box sizing border box ...
ХотКей по VScode: • 10 горячих клавиш в VS...
Видео про БЭМ - • БЭМ методология. Практ...
Видос по svg - • SVG, большой гайд
Большой гайд по гридам - • CSS GRID Большое руков...
Все о флексах - • FLEXBOX начало. Флексб...
Продвинутые флексы - • flex-basis, flex-grow,...
----------------------------------------
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

Опубликовано:

8 сен 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 29

@ArteEtHumanitate 9 месяцев назад

Браво, маэстро❤ Спасибо за топ контент. Твои марафоны первое средство от осенней хандры.

@vadymprokopchuk 9 месяцев назад

спасибо

@Francija-Bez-Rozovyx-Ochkov 9 месяцев назад

Я ещё 2 уй часть не досмотрел, а тут уже 3ья! Будет чем заняться в эти выходные !!! Спасибо Маэстро за топовый контент !

@dimalukashenko4865 8 месяцев назад

Отличный урок, спасибо за труд!

@Jane_123 9 месяцев назад

Спасибо большое, с удовольствием смотрю ваше видео.

@natalietalas 5 месяцев назад

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

@AU_IAN 5 месяцев назад

Заметка для меня! 23:22

@grigoriy.kiriluk 9 месяцев назад

топ контентос👍

@walterwhite4407 9 месяцев назад

МЕН,ДЯКУЮ ЗА КОНТЕНТ

@vadymprokopchuk 9 месяцев назад

дякую

@user-wm5wk8pe9o 9 месяцев назад

Не доработан список в футоре. Предлагаю такой вариант: @media (max-width: 465px) { .footer__list { padding-top: 60px; flex-direction: column; align-items: center; gap: 20px; } }

@ndreiorekhov777 6 месяцев назад

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

@fridaoblomova4939 8 месяцев назад

Благодарю!❤️ Было очень полезно посмотреть как вы анализируете проект и составляете медиа запросы, у меня всегда затупы с этим. Кстати, я до этого по наитию писала медиа запросы в виде media screen and(), но получается можно и без типа устройства. А что даёт тип устройства в медиа запросе? 🤔

@sergeevalexander4695 8 месяцев назад

screen это компонент который сообщает что правила должны применяться ко всем типам экранов,а слово and связывает воедино набор условий (max-width: 480px)

@konkov_aleksey 8 месяцев назад

Принципиально надо было делать буквы с наушниками разнослойными через css? Типа Вы решили с парнем и sound запилить один jpg просто, а тут какие-то изощрения происходят, когда реализация адаптива с подобным кажется еще сложнее, чем там...

@andrey-Dudkin 9 месяцев назад

А можно видос по единицам измерения vh?

@shnshnd 3 месяца назад

Спасибо за урок! все как всегда круто! Почему-то только пришлось дополнительно прописать ширину картинке в хедере в медиа запросе, потому что по другому не сработало и вся вечеринка поплыла, появился горизонтальный скролл , вся картинка не умещалась при 800px примерно. надеюсь мне это потом не окунется, ну вот в след уроке и узнаю)))

@user-oc5vk8cw3o 12 дней назад

Подскажите, а что конкретно прописали? У меня такая же ерунда, max-width:100% не работает.

@user-oc5vk8cw3o 12 дней назад

Разобралась. Я прописывала max-width для класса .header__content-images, а надо было именно для IMG в этом диве, как собственно и было сделано в изначальном коде.

@tmusabaev5188 7 месяцев назад

Что делать если при изменении размеров, фотка наушников перекрывает choose color ?

@farhodizuribek9006 8 месяцев назад

🤝

@MAR10ds353 9 месяцев назад

А что у тебя за шрифт? И как его установить?

@prokrastinator6648 Месяц назад

предыдущий урок

@mrkut360 8 месяцев назад

Маэстро , у меня проблемы с этим типом , который на футере . На девайсах приходиться долго скроллить вниз . Смотрю на видео ,a у вас все в порядке . Никак не могу понять в чем дело . Что можно сделать с этим типом ?

@vadymprokopchuk 8 месяцев назад

неверное высота у типа большая, проверь точно ли относительные единицы писал

@Zelar1313 8 месяцев назад

Для адаптива надписи на наушниках, я бы использовал wv и %. Как для размера шрифта, так и для позиционирования элементов. Так как изображение сужается от ширины экрана

@EvilYou 6 месяцев назад

У меня получилось сделать адаптив, использовал как раз vw для шрифта (но только для медиа запросов (max-width: 1200px), а для контейнера картинки просто задал padding: 0 16.667%. На ширине в 575px поставил еще один медиа запрос и переделал примерно как в видео, так как картинка и шрифт становятся слишком маленькими.

@kromvelua4410 7 месяцев назад

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