ned4ded

Это решит проблему:

<meta name="viewport" content="width=device-width">

TL;DR

"Портативные устройства часто рендерят страницы в виртуальном окне, называемым вьюпортом, ширина которого обычно больше ширины экрана" - mdn. Для обхода этого поведения используется свойство width мета-аттрибута viewport, равное значению device-width: content="width=device-width". В таком случае ширина вьюпорта будет равна ширине экрана устройства.

width - не единственное свойство, позволяющие изменять заложенное поведение вьюпорта, полный список доступен на mdn или в спеке. Стоит отметить, что это драфт, но современные браузеры его стараются имплементировать.

Другое свойство, используемое тобой в примере, - initial-scale, устанавливающие зум вьюпорта в определенное значение при первичном запуске сайта. Значение может варьироваться от 0.1 до 10. При 1 зум равен ширине вьюпорта (можно сказать, что в данном случае зум отсутствует). По дефолту же зум равен значению auto, который высчитывается путем деления исходного значения вьюпорта на значение реально отрендеренного холста, что позволяет отобразить весь холст на экране (формула чуть сложнее). В твоем случае зум равен ширине экрана (т.к. ширина вьюпорта равна ширине экрана через width=device-width), т.е. 320px. Когда ты устанавливаешь ограничение на минимальную ширину тела документа, равную, например, 480px, то по дефолту у тебя будет горизонтальный скролл при зуме равном 1. Это логичное поведение, заложенное в спеке. Это как пытаться посмотреть сайт с ограничение в 1600px в ширину с ноутбука, там тоже будет горизонтальный скролл.

Чтобы обойти это поведение достаточно установить initial-scale в значение auto, или убрать это свойство вообще, т.к. это значение по дефолту.

Добрый день. Вкусовщина, конечно, но я за нормальную работу стилей, а не подгон под пп, исключением является случай, когда такой подгод обусловлен некоторой идеей дизайнера (но в 90% случаев это просто недочет дизайна).

Используя flexbox и делая все по PP приходится отказываться от justify-content, и использовать костыли в виде margin чтобы подогнать под макет, в свою очередь это здорово мешает при адаптации под меньшие разрешения, приходится постоянно перебивать размеры margin, с justify-content и flex-wrap адаптировать по сути и не надо оно само адаптируется но не подходит под PP c расхождением до 50-70 пикселей.

Если расхождение на 50 пикселей, то используйте другой подход при верстке, чтобы быть ближе к макету. Тут же важно распределение пространства между блоками и их позиционирование в документе.

Иными словами, если вы видите, что у вас в ряду 3 блока и пространство между ними должно распределяться +/- равномерно (но в дизайне один из блоков расположен не на месте), тогда justify-content будет оправдан, но если у вас 3 блока разной ширины с разными отступами и такое решение обусловлено некоторым "видением", то придется выкручиваться (:

Добрый день, самый простой способ - скрыть оригинальные радиокнопки, сверстать кнопки с двумя состоянием: вкл и выкл (через отдельный спан или :before + :after для лейбла). Сам чекбокс выбирается с помощью тега label и аттрибута for.

Собственно, вот пример из бутстрапа: https://getbootstrap.com/docs/4.3/components/forms...

Обратите внимание на стили

.custom-control-input:checked ~ .custom-control-label::before { ... }

Селектор .a ~ .b выбирает все элементы с классом .b, следующие за элементами с классом .a (на одном уровне дома). С помощью данной фишки можно исхитриться и делать много интересных вещей без js: слайдеры, выпадающее меню, реализовать любую логику, зависящую от двух состояний.

ps как-то ради интереса реализовывал с помощью селекторов логику из 4х состояний, так что все ограничивается вашей фантазией ;)

div {
  background-image: url("first-image-url"), url("second-image-url");
}

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

.b2 {
    width: calc(50% - 2px); // 2px можете убрать, когда уберете бордер у b3
    float: right;
}

добрый день, я сначала хотел написать подробный ответ, но...

проблема не в bs, прочитайте, пожалуйста, эти инструкции:
https://getbootstrap.com/docs/4.3/layout/grid/ - про сетку,
https://getbootstrap.com/docs/4.3/components/forms/ - про разметку форм,
https://getbootstrap.com/docs/4.3/layout/utilities... - утилиты для лейаута

все остальные проблемы должны отпасть сами собой.

Добрый вечер. Файл app.js, содержащий исполняющий код для этого слайдера, подключен в двух местах. Полагаю, что удаление одной из ссылок на него ликвидирует проблему, т.к. eventlistner вешается на кнокпи дважды.

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

Текст отправляется именно такой, потому что ? - это %3F в unicode. Любое name с формы будет перекодировано в base64. Сам же ? в конец строки браузера подставляется при формировании запроса к серверу (т.е. браузером, а не вами), сл-но, его нужно исключить.

Тоже самое происходит со знаком амперсанд. Браузером автоматически собираются параметры с формы и отправляются на сервер используюя такую структуру: key=value&key2=value2...

Следующий код сформирует запрос ?kek=&results=<your_text> к целевому пути

<form action="/targetPage.html" method="GET">
    <input name="kek" hidden>
    <input type="text" name="results" value=""> // здесь нужно будет ввести текст
  </form>

Как видите, в таком случае после слова kek подставляется знак равенство, т.к. это соответствует протоколу http. Веротяно, можно настроить http сервер, который сможет принимать и обрабатывать запросы без = (без пустого параметра), но я в точности вас сейчас просветить по этому моменту не смогу.

Привет из htmlacademy, тоже верстал этот макет )
Индекс:

1) Иконки на дашборде расположены неровно.

2) Едет меню каталога товаров при переполнении.

3) Спецификация товара, сделанная через флекс, не имеет свойства wrap, из-за чего при переполнении едет верстка.

4) Псевдоэлемент after для кнопки Подробнее находится не по центру в firefox.

5) В email форме нет стилизации бэкграунда для инпутов.

6) Футер, по-моему, должен быть растянутым в края (как и фон для блока services, которого у тебя нет).

Страница каталога:

7) бэкграунд для фильтров не соответствует макету и должен быть в края.

8) Bluetooth радиокнопки сделаны неровно.

9) Цены под карточками сделаны неровно.

10) При наведении на карточку товара должна становится прозрачной кратинка, а не серый фон + позиционирование неровное, какая-то линия на каждой карточкой по наведению.

11) Пагинация без заливки.

12) Селфи-палка «Следуй за мной» 4900 руь.

13) И почти для всех блоков: ты используешь display:flex, но располагаешь элементы все равно используя margin. Да, в некоторых местах это необходимо, но, например, в меню каталог товаров, в info секции можно нормально расположить блоки, используя свойства флекс-боксов. А в каталоге (в лучшем месте для использования флекса), у тебя inline-block )

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

Сколько времени тебе осталось до сдачи работы?) Я свою, помню, допиливал в последние минуты перед дедлайном ^^

На Tifanny это реализовано с помощью js. Сильно сомневаюсь, что тут нужна доп. библиотека. При наведении на товар добавляется целый блок в секцию товара. После mouseleave (хз, как назвать это по-русски, отведение курсора?) блок удаляется.

У них использован js, вероятно, для сокращения веса страницы, увеличения скорости рендеринга.

Как ни странно, на Sunlight это реализованно сильно по-другому. Там через js добавляется только класс к блоку, все остальные его элементы уже заранее собраны.

Совпадение стилей - случайность, возможно, дизайн кто-то у кого-то стырил (причем весь дизайн, у них совпадает не только эффект при наведении на карточку товара, но много чего еще).

На чистом css реализовать можно, но без анимации. Что-то вроде:

.card
    .card__info
    .card__info-more

.card__info:hover ~ .card__info-more { display: block };

Все это вы вполне могли узнать сами, используя инструменты разработчика ;)

Доброго дня!

У этого расширения есть поле "масштаб".



Вам нужен, судя по всему, масштаб = ~0,85.

В любом случае, если не получится уменьшить масштаб картинки, то можно уменьшить масштаб отображения окна браузера (ctrl+колесо).

Добрый день! У вас огромные проблемы с разметкой, она начинает ехать уже при разрешении в 1700px.

Но отвечая на конкретный вопрос: сделать это можно с помощью свойства min-width: 1200px для того блока, который не должен сужаться. Стоит добавить, что в данном случае будет лучше, если весь сайт не будет изменяться при ширине меньше 1200px. Более того, на всех устройствах с шириной окна браузера менее 1200px будет появляться горизонтальная прокрутка.

Добрый день!

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

1) Ваш фон имеет неравномерный параметр inner shadow.
2) Высота секций отличается друг от друга, фон каждый секции будет обрезаться в рандомном, непредсказуемом месте (bg-size: cover);
3) Видно, что фон на картинке заканчивается не в том месте паттерна, в котором начинается (т.е. если поставить две эти картинки друг на друга, то они не будут стыковаться).

Что можно сделать? Вам придется поработать с изображением, я предполагаю, что вы владеете ps и он у вас установлен. И тут возможно два варианта развития событий:

А) Простой. У вас в psd шаблоне картинка фона и <конуса-колуна + стикера> не объединены и вы можете ее экспортировать отдельно. Тогда вам нужно:
а.1) Создать из фона паттерн. Делать это придется подбором, если дизайнер вам не подвез паттерна.
а.2) Применить паттерн фона к body с bg-repeat: repeat. Если фон имеет "вклееную" внутреннюю тень, то не забудьте осветлить изображение, чтобы оно было идентично по цветовой политре середине bg, или создайте паттерн из середины (как будет удобнее);
а.3) Наложить на каждую секцию inner shadow.

Б) Сложный случай, если ваш фон с конус-колуном представлен единым, неразделенным файлом. Тогда вам нужно выполнить весь А и подбирать bg-position для body попиксельно. Любое увеличение высоты первой секции повлечен за собой появление шва. Но выбора особого у вас нет.

PS bg-size: cover скалирует изображение, подгоняя его под размер блока. Это еще одна проблема, которая вызовет шев. Уберите cover, поставьте 100%; В этом случае без repeat у вас появятся пустые области сверху и снизу, прикрыть которые можно тем же паттерном, что я описал в пунктах А-Б.

В общем, получатся неприятные костыли, но все же:

.drop-down.mob {
/* отступ в мобильной версии не нужен */
  margin: 0; 

 /* с поддержкой в ie/edge у этих единиц измерения есть траблы, 
но это наиболее безболезненный костыль без переписывания HTML */
  width: 100vw;
  right: 0;

  & a {
    display: block;
    float: none;
    min-width: auto;
  }

  & .gpoisk {
     width: 100%;
  }
}

btw, на этом сайте так же есть небольшая проблема с выпадающем списком на viewport >620px: бар фиксируется внизу экрана, но меню работает как для десктопа (видимо, выпадает вниз), сл-но, не работает вовсе.

@media only screen and (min-width: 451px) { /* Замени на 621 */
 .mob {display: none;} 
 }
@media only screen and (max-width: 450px) { /* Замени на 620 */
 .pc {display: none;} 
 }