Как сделать адаптивный веб-дизайн? [закрыто] ⇐ CSS

[Anonymous]

Я очень не понимаю, как создать адаптивный веб-дизайн. Как мне подогнать объекты под размер экрана и не испортить их? Цель состоит в том, чтобы мой веб-сайт выглядел так: первая часть сайта, вторая часть сайта.
Когда он не в полноэкранном режиме, он выглядит так: перепутан, когда не в полноэкранном режиме. screen
Вот пример моего CSS-кода:
/* entire site */
* {
margin: 0;
padding: 0;
background-color: white;
box-sizing: border-box;
}

/* head-navigation */
.Rectangle-9 { /* pink box */
position: relative;
width: auto;
height: 130px;
flex-grow: 0;
margin: 0 0 93px;
padding: 7px 929px 8px 34px;
background-color: #ffe1e1;
}

#nav { /* text boxes */
position: relative;
font-family: Montserrat;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
font-style: italic;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: black;
background-color: transparent;
text-decoration: none;
padding: 30px;
cursor: pointer;
left: -70px;
bottom: 100px ;
}

.nav img { /* nav logo */
position: relative;
width: 180px;
height: 180px;
position: relative; top: -20px; left: -50px;
background-color: transparent;
}

/* Add Nav button hover*/
#nav:hover{
color: #ff5b5b;
}

/* Create two equal columns that float next to each other */
.column1 {
float: left;
width: 50%;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
.column1 {
width: 100%;
}
}



Подробнее здесь: https://stackoverflow.com/questions/783 ... web-design