ned4ded

Добрый день! У вас огромные проблемы с разметкой, она начинает ехать уже при разрешении в 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;} 
 }

Тебе может подойти:

.article {
position: relative
}

.article:after {
position: absolute;
background-image: url(...) center no-repeat;
}

https://jsfiddle.net/ned4ded/1ordzcww/