FrelFrloich

Это не своевременно, но разве это не просто круги с цифрами и бефор афтер с бордерами?

Трудно судить, но вы указали своему заголовку типо этого.

.title {
width: 300px
}

а надо:

.title {
width: 100%;
max-width: 300px;
}

таким образом вы укажите заголовку, растягиваться на 100 процентов, но максимально на 300px и когда ваша колонка будет уже 300px он не будет занимать твёрдую позицию в 300px а будет в 100% от этой колонки. В следующий раз заливайте пример своего кода сюда или аналог https://codepen.io/

Вы не правильно подходите к вопросу, если определённые разрешения экранов, допустим 1920 1440, 1024, 768, 460, 360, 320

Между 1920 и 1440 по большей части плевать как выглядит сайт и это разрабатывается на стадии дизайна и изначальной вёрстки,

Но вы привели в пример 1536px, это разрешение 1920 с включённой по дефолту в винде 125% увеличением, соответственно если ваш макет разработан как полагается с 1920 то всё нормально должно смотреться до разрешения 1536px, а дальше уже будет плыть.

Изначально куда вы смотрели когда принимали работу не понятно.

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

Вы не сможете впихнуть в полку с глаженным бельём 100 рубашек, когда полка предназначена для 20, без последствий в плане мятости или обрезания лишнего. Хотя желание у вас такое может быть.