всем хай, извиняюсь что так часто помощи прошу. просто не как без вас не справиться,

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

мне даже адаптивная разметка легче идет чем разметка <float>

обьесните плиз

Изображение

------
78389_Lwybpg_EPP0.jpg (415.8 Kb)
Скачиваний: 119

Float - это ересь...
Display: flex.
Вся суть адаптивного диза - это указания ширины в процентах и скрытие или показание элементов исходя из ширины экрана
________
посл. ред. 01.08.2021 в 01:17; всего 2 раз(а); by jasis

jasis, я понял что ширину опредиляет @media { макс ширина}
и так далее.

я пробовал, но у мення все блоки встают в перемешку ((((

155876556, Разметку проверь. Может там накосячил.

jasis,


ну у меня вот разметка, пример

.clearfix:after {

     content: "";

     display:block;

     clear: both;

 }

 

 html, body {

     height: 100%;

     margin: 0;

     padding: 0;

     font-family: Arial,sans-serif;

     font-size: 14px;

     line-height: 1.4;

     color: #333;

     background-color: #fff;

 }

 

 .header, .content-wrapper, .container, .content, .footer {

     display: -webkit-flex;

     display: -moz-flex;

     display: -ms-flex;

     display: -o-flex;

     display: flex;

     flex-direction: row;

 }

 

 .header {

     height: 200px;

     background: #6CAEDD;

     color: #fff;

     -webkit-box-flex: 0;

     -webkit-flex: none;

     -ms-flex: none;

     flex: none;

 }

 

 .footer {

     height: 150px;

     background: #364850;

     color: #fff;

     -webkit-box-flex: 0;

     -webkit-flex: none;

     -ms-flex: none;

     flex: none;

 }

 

 .content-wrapper {

     margin: 0 auto;

     flex-direction: column;

     height: 100%;

     width: 2000px;

 }

 

 .container {

     flex-wrap: nowrap;

     flex: 1 0 auto;

 }

 

 .content {

     width: 100%;

     flex-direction: column;

     flex: 1 1 auto;

     order: 0;

     order: 1;

 }

 

 .sidebar {

     background: #FFD399;

     flex: 0 0 auto;

 }

 

 .sidebar1 {

     width: 300px;

     order: 1;

     order: 0;

 }

 

 .sidebar2 {

     width: 300px;

     order: 2;

     order: 2;

 }

 

пример в низу

Помогите пацану,. Я Тоже гляну как это делается

У тебя сайд бары с фиксированной шириной. А должно быть если фикс , то скрывать их на замену другие показывать, либо эти в процентах писать..
Я вообще начинал с bootstrap

jasis, бутстрапом, я чёт ничего не понял там , что какой тег отвечает, мне легче самому писать,
Я через бутстрап как бы пробовал , тоже не помогло

652591566, не понял потому что не хотел.