всем привет
начал верстать макет , да понял, что с резиновой версткой не дружу.
вот тут ссылка на него: https://fed-alex.github.io/resopnsive/
сейчас при уменьшении размера экрана, основной контейнер так же уменьшается, а пустые поля по бокам остаются. корректно ли это?
как сделать так, чтобы с уменьшением размера экрана уменьшались в первую очередь поля по бокам, а затем лишь сам контейнер?
файлы так же тут https://github.com/fed-alex/resopnsive
/* общие стили */
html, body{
max-width: 1920px;
width: 100%;
margin: 0;
background-color: #F5F6FA;
}
.button__block{
display: flex;
justify-content: center;
margin-top: -28px;
}
a{
font-family: Montserrat;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 0.78125%;
text-align: right;
text-transform: uppercase;
text-decoration: none;
color: #5A5A5A;
}
a:hover{
color: #000000;
border-bottom: 3px solid #F27A54 ;
opacity: 1;
}
button{
background-image: linear-gradient(90deg, #F27A54 -21.05%, #A154F2 121.05%);
height: 56px;
max-width: 251.75px;
width: 100%;
border-radius: 30px;
text-align: center;
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 13.25px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
border: 10px solid white;
}
button:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* хэдер */
header{
max-width: 100%;
width: 100%;
margin-top: 0px;
height: 90px;
background: #ffffff;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
position: relative;
}
.header_container{
/*ширина центрольного блока 1200px*/
display: flex;
width: 62.5%;
justify-content: space-between;
margin: 0 auto;
align-items: center;
height: 100%;
}
.header_container_menu_ul{
display: flex;
justify-content: space-around;
align-items: center;
flex-grow: 1;
}
.header_container_menu{
display: flex;
width: 32,86%;
justify-content: space-between;
flex-grow: 1;
align-items: center;
}
.header_container_menu_ul_li{
list-style-type: none;
margin-right: 1.8%;
}
#header_container_logo_img{
max-width: 100%;
max-height: 100%;
}
.header_container_secondmenu{
display: flex;
justify-content: space-around;
align-items: center;
flex-grow: 0.1;
margin: 0 auto;
}
/* первый блок */
.first_block{
height: 738px;
width: 100%;
background: #FFFFFF;
margin-bottom: 100px;
background: linear-gradient(180deg, #FFFFFF 13.75%, rgba(245, 246, 250, 0.64854) 61.11%, rgba(245, 246, 250, 0) 100%), #FFFFFF;
}
.first_block_container{
display: flex;
flex-direction: column;
justify-content: space-around;
width: 62.5%;
margin: 0 auto;
height: 100%;
}
.first_block_container_blocks{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.first_block_container_block{
width: 33.3%;
margin: 50px;
}
.first_block_container_name{
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 32px;
line-height: 139.9%;
text-transform: uppercase;
color: #5A5A5A;
}
.first_block_container_discrtiption{
font-family: Montserrat;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 139.9%;
color: #6D6D6D;
}
.first_block_container_block_img{
text-align: center;
}
.first_block_container_block_img:hover{
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.first_block_container_block_name{
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 28px;
color: #5A5A5A;
text-align: center;
}
.first_block_container_block_discr{
font-family: Zilla Slab;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 18px;
color: #6D6D6D;
text-align: center;
}
/* второй блок */
.second_block{
width: 100%;
height: 738px;
background: #FFFFFF;
margin-bottom: 100px;
}
.second_block_cont{
display: flex;
flex-direction: column;
justify-content: space-around;
width: 62.5%;
margin: 0 auto;
height: 100%;
}
.second_block_content{
display: flex;
justify-content: center;
}
.second_block_content_right{
display: flex;
flex-direction: column;
justify-content: space-around;
}
.second_block_content_text{
display: flex;
}
.second_block_footer{
margin: 0 auto;
font-family: Montserrat;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 120%;
color: #6D6D6D;
}
.second_block_name, .third_block_container_name{
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 32px;
line-height: 139.9%;
text-transform: uppercase;
color: #5A5A5A;
}
.second_block_content_text_name{
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 120%;
color: #6D6D6D;
}
.second_block_content_text_discr{
font-family: Montserrat;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 120%;
color: #6D6D6D;
}
.second_block_content_text_container{
margin-left: 40px;
}
/* третий блок */
.third_block{
width: 100%;
height: 738px;
background: #FFFFFF;
margin-bottom: 100px;
}
.third_block_container{
display: flex;
justify-content: space-around;
width: 62.5%;
margin: 0 auto;
height: 100%;
}
.third__block__container{
display: flex;
flex-direction: column;
justify-content: space-around;
flex-grow: 1;
}
.third_block_container_content_left_img{
display: flex;
justify-content: space-between;
}
.third_block_container_content_left_discr{
font-family: Montserrat;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 139.9%;
color: #6D6D6D;
}
.fourth_block_content_left_images_one{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
/*
футер */
footer{
width: 100%;
height: 300px;
background: #FFFFFF;
}
.footer_container{
display: flex;
justify-content: space-between;
width: 62.5%;
margin: 0 auto;
height: 100%;
align-items: center;
}
.header_container_right_menu_ul{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
max-height: 85px;
height: 100%;
}
.footer_container_center_nemu{
flex-grow: 0.6;
}
.contacts{
display: flex;
justify-content: space-between;
}
.number, .web_site{
display: flex;
justify-content: space-between;
margin-top: 40px;
margin-left: 20px;
}
.footer_container_menu_ul_li{
margin-top: 10px;
list-style-type: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fit go</title>
<link rel="stylesheet" href="style.css">
<link href="https://allfont.ru/allfont.css?fonts=montserrat" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- хэдер -->
<header>
<div class="header_container">
<div class="header_container_logo">
<img id = "header_container_logo_img" src="src/FitGo.png" alt="image">
</div>
<div class="header_container_menu">
<ul class="header_container_menu_ul">
<li class="header_container_menu_ul_li"><a href="#">курсы</a></li>
<li class="header_container_menu_ul_li"><a href="#">наши отличия</a></li>
<li class="header_container_menu_ul_li"><a href="#">питание и упражнения</a></li>
<li class="header_container_menu_ul_li"><a href="#">видео о нас</a></li>
<li class="header_container_menu_ul_li"><a href="#">эксперты</a></li>
</ul>
</div>
<div class="header_container_secondmenu">
<div class="header_container_secondmenu_discription">
<a href="#">в личный кабинет</a>
</div>
<div class="header_container_secondmenu_image">
<img src="src/account_circle.png" alt="image">
</div>
</div>
</div>
</header>
<!-- первый блок -->
<div class="first_block">
<div class="first_block_container">
<div class="first_block_container_name">
Что вы получите?
</div>
<div class="first_block_container_discrtiption">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
<div class="first_block_container_blocks">
<!-- первый блок -->
<div class="first_block_container_block">
<div class="first_block_container_block_img">
<img src="src/access_time1.png" alt="image">
</div>
<div class="first_block_container_block_name">
План питания
</div>
<div class="first_block_container_block_discr">
Полноценный, сбалансированный, созданный лично для вас
</div>
</div>
<!-- второй блок -->
<div class="first_block_container_block">
<div class="first_block_container_block_img">
<img src="src/access_time2.png" alt="image">
</div>
<div class="first_block_container_block_name">
Видео-тренировки
</div>
<div class="first_block_container_block_discr">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<!-- третий блок -->
<div class="first_block_container_block">
<div class="first_block_container_block_img">
<img src="src/access_time3.png" alt="image">
</div>
<div class="first_block_container_block_name">
Консультация 24/7
</div>
<div class="first_block_container_block_discr">
Задайте вопрос в любое время нашим экспертам: диетологу, тренеру и психологу!
</div>
</div>
</div>
</div>
<div class="button__block">
<button>Оставить заявку</button>
</div>
</div>
<!-- второй блок -->
<div class="second_block">
<div class="second_block_cont">
<div class="second_block_name">
информация о курсах
</div>
<div class="second_block_content">
<div class="second_block_content_left">
<img id="second_block_image" src="src/ttt.png" alt="image">
</div>
<div class="second_block_content_right">
<!-- цифра 1 -->
<div class="second_block_content_text">
<div class="second_block_content_text_image">
<img id = "number_color1" src="src/2.png" alt="image">
</div>
<div class="second_block_content_text_container">
<div class="second_block_content_text_name">
Разнообразие
</div>
<div class="second_block_content_text_discr">
Вы можете выбрать любой наш курс. Что самое приятное, при продлении подписки вы можете сменить его! А если хочется остаться на старом - мы заменим вам 2 блюда в рационе на новые! Скоро будем выпускать новые курсы и планы питания. С нами не соскучишься! ;)
</div>
</div>
</div>
<!-- цифра 2 -->
<div class="second_block_content_text">
<div class="second_block_content_text_image">
<img id = "number_color1" src="src/2.png" alt="image">
</div>
<div class="second_block_content_text_container">
<div class="second_block_content_text_name">
Сервис
</div>
<div class="second_block_content_text_discr">
Чат с диетологом, чат с тренером и общий чат с психологом - в вашем полном распоряжении. Наши эксперты всегда готовы прийти на помощь!
</div>
</div>
</div>
<!-- цифра 3 -->
<div class="second_block_content_text">
<div class="second_block_content_text_image">
<img id = "number_color1" src="src/2.png" alt="image">
</div>
<div class="second_block_content_text_container">
<div class="second_block_content_text_name">
Доступность
</div>
<div class="second_block_content_text_discr">
Мы предоставляем полноценные, отработанные инструменты, которые помогут каждой! Мы не считаем, что нужно делить наших участниц на VIP и не VIP персон
</div>
</div>
</div>
</div>
</div>
<div class="second_block_footer">
Рады приветствовать тебя в семье FIT GO!
</div>
</div>
<div class="button__block">
<button>Оставить заявку</button>
</div>
</div>
<!-- третий блок -->
<div class="third_block">
<div class="third_block_container">
<div class="third__block__container">
<div class="third_block_container_name">
Питание и упражнения
</div>
<div class="third_block_container_content_left_discr">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="third_block_container_content">
<div class="third_block_container_content_left">
<div class="third_block_container_content_left_img">
<div class="fourth_block_content_left_images_one">
<div class="fourth_block_content_left_images_one_img">
<img id="food1" src="src/eat1.png" alt="image">
</div>
<div class="fourth_block_content_left_images_name" >Завтрак</div>
</div>
<div class="fourth_block_content_left_images_one">
<div class="fourth_block_content_left_images_one_img">
<img id="food1" src="src/eat2.png" alt="image">
</div>
<div class="fourth_block_content_left_images_name" >Полдник</div>
</div>
<div class="fourth_block_content_left_images_one">
<div class="fourth_block_content_left_images_one_img">
<img id="food1" src="src/eat1.png" alt="image">
</div>
<div class="fourth_block_content_left_images_name" >Обед</div>
</div>
<div class="fourth_block_content_left_images_one">
<div class="fourth_block_content_left_images_one_img">
<img id="food1" src="src/eat2.png" alt="image">
</div>
<div class="fourth_block_content_left_images_name" >Ужин</div>
</div>
</div>
</div>
</div>
</div>
<div class="third_block_container_content_rigth">
<img id = "rigth_image" src="src/3663_1.png" alt="image">
</div>
</div>
<div class="button__block">
<button>Оставить заявку</button>
</div>
</div>
<!-- футер -->
<footer>
<div class="footer_container">
<div class="footer_container_logo">
<img id = "header_container_logo_img" src="src/FitGo.png" alt="image">
</div>
<div class="footer_container_center_nemu">
<ul class="header_container_right_menu_ul">
<li class="footer_container_menu_ul_li"><a href="#">курсы</a></li>
<li class="footer_container_menu_ul_li"><a href="#">наши отличия</a></li>
<li class="footer_container_menu_ul_li"><a href="#">питание и упражнения</a></li>
<li class="footer_container_menu_ul_li"><a href="#">видео о нас</a></li>
<li class="footer_container_menu_ul_li"><a href="#">эксперты</a></li>
</ul>
</div>
<div class="footer_container_right_menu">
<div class="button_block">
<button>Оставить заявку</button>
</div>
<div class="contacts">
<div class="number">
<div class="number_img">
<img src="src/Vector.png" alt="image">
</div>
<div class="number_number">
+7 (800) 555 - 35 - 35
</div>
</div>
<div class="web_site">
<div class="number_img">
<img src="src/Vector_(1).png" alt="image">
</div>
<div class="number_number">
fitgo.ru
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>