0.0.182 media 360px v.3

This commit is contained in:
2023-10-26 13:11:51 +03:00
parent 02f7edade5
commit 31833000bb
5 changed files with 193 additions and 182 deletions

View File

@@ -0,0 +1,155 @@
/*media breakpoints*/
@media (max-width: 360px) {
header{
padding: 5px 16px;
}
header .header-second {
margin-left: unset;
}
.header_big_background{
height: 45px;
}
.header_logo_mobile{
display: inline-block ;
}
.header_logo{
display: none;
}
.container_form_search_carrier{
margin: 10px;
}
.button_profile_header{
display: none;
}
.button_profile_header_mobile{
display: inline-block ;
}
.header-first>div {
margin-right: 37px;
}
.line_f_header{
top: 44px;
}
.top_block_static_wrapper_main{
background: unset;
}
.header_big_background {
max-width: 100%;
}
#sub_title_static>p{
white-space: normal;
}
.top_block_static{
padding: 0;
}
.mid_block_static{
padding: 0;
}
.wrapper_tab_button{
width: 55%;
}
.benefit_img{
flex-wrap: wrap;
}
.tab-btn-2{
margin: 0 0 5px 0;
}
button#more_button{
width: 100%;
}
#title_static{
font-size: 34px;
line-height: 42px;
}
.cards_wrapper{
flex-direction: column;
}
.cards_item_1,
.cards_item_2,
.cards_item_3,
.cards_item_4
{
width: 100%;
height: 180px;
background-size:60%;
}
.card_title_1{
font-size: 34px;
font-style: normal;
font-weight: 700;
line-height: 42px;
margin: 22px 0 0 10px;
text-shadow: 1px 1px 0px #272424;
}
.card_title_2{
font-size: 17px;
font-style: normal;
font-weight: 600;
line-height: 26px;
margin: 10px 0 0 10px;
text-shadow: 1px 1px 0px #272424;
}
.card_title_3{
margin: 10px 0 0 10px;
width: 95%;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
text-shadow: 1px 1px 0px #272424;
}
summary{
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 26px;
margin: 0;
}
summary ~ * {
padding: 0 1em 10px 1.4em;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
.news_block_main {
margin: 0 16px 120px 16px;
}
.news_item {
margin-bottom: 20px;
}
.container_form_search_carrier{
flex-direction: column;
margin-top: 170px;
width: unset;
}
.header-second-item,
.header_btn_sender,
.header_btn_mover{
display: none;
}
}
@media (max-width: 992px) {
.benefit_img>img{
display: none;
}
}
/*END media breakpoints*/

View File

@@ -1953,7 +1953,7 @@
.header_big_background{ .header_big_background{
height: 90px; height: 90px;
background: #F8F8F8; background: #F8F8F8;
width: 1440px; width: 1280px;
position: absolute; position: absolute;
z-index: 3; z-index: 3;
} }

View File

@@ -139,10 +139,15 @@ html, body{
height: 100%; height: 100%;
} }
.wrapper { .wrapper_content {
max-width: 1440px; margin: 55px auto;;
/*padding: 40px 5px;*/
}
.wrapper_main{
max-width: 1280px;
margin: auto; margin: auto;
padding: 40px 5px;
} }
@@ -214,8 +219,7 @@ body {
} }
header { header {
/*width: 1280px;*/ margin-top: 20px;
/*margin: 0 50px;*/
padding: 5px 40px; padding: 5px 40px;
position: sticky; position: sticky;
z-index: 4; z-index: 4;
@@ -480,14 +484,18 @@ footer>div {
} }
header .header-first { header .header-first {
display: inline-block; float: left;
margin-top: 12px;
} }
.header_logo_mobile{ .header_logo_mobile{
display: none !important; display: none;
} }
.header-first>div{
.header_logo,
.header_btn_mover,
.header_btn_sender{
margin-right: 40px; margin-right: 40px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@@ -508,7 +516,7 @@ header .header-first {
.dropbtn { .dropbtn {
color: white; color: white;
margin-right: 40px;
font-size: 16px; font-size: 16px;
border: none; border: none;
} }
@@ -586,18 +594,19 @@ header>div>div>a {
} }
header .header-second { header .header-second {
display: inline-block; float: right;
margin-left: 20%;
} }
.button_profile_header_mobile{ .button_profile_header_mobile{
display: none !important; display: none;
} }
.header-second>div {
.header-second-item,
.cont_header_btn_profile{
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
span.btn_profile_name { span.btn_profile_name {
@@ -1060,9 +1069,7 @@ section.login>form>div>div:nth-child(5)>a {
} }
section.profile { section.profile {
max-width: 1280px; padding: 60px 40px 0;
margin: auto;
padding: 120px 40px 0;
margin-bottom: 120px; margin-bottom: 120px;
} }
@@ -2694,160 +2701,6 @@ details[open] summary ~ *{
/*END news articles all*/ /*END news articles all*/
/*media breakpoints*/
@media (max-width: 360px) {
header{
padding: 5px 16px;
}
header .header-second {
margin-left: unset;
}
.header_big_background{
height: 45px!important;
}
.header_logo_mobile{
display: inline-block !important;
}
.header_logo{
display: none!important;
}
.container_form_search_carrier{
margin: 10px;
}
.button_profile_header{
display: none;
}
.button_profile_header_mobile{
display: inline-block !important;
}
.header-first>div {
margin-right: 37px;
}
.line_f_header{
top: 44px!important;
}
.top_block_static_wrapper_main{
background: unset;
}
.header_big_background {
max-width: 100%;
}
#sub_title_static>p{
white-space: normal;
}
.top_block_static{
padding: 0;
}
.mid_block_static{
padding: 0;
}
.wrapper_tab_button{
width: 55%;
}
.benefit_img{
flex-wrap: wrap;
}
.tab-btn-2{
margin: 0 0 5px 0;
}
button#more_button{
width: 100%;
}
#title_static{
font-size: 34px;
line-height: 42px;
}
.cards_wrapper{
flex-direction: column;
}
.cards_item_1,
.cards_item_2,
.cards_item_3,
.cards_item_4
{
width: 100%;
height: 180px;
background-size:60%;
}
.card_title_1{
font-size: 34px;
font-style: normal;
font-weight: 700;
line-height: 42px;
margin: 22px 0 0 10px;
text-shadow: 1px 1px 0px #272424;
}
.card_title_2{
font-size: 17px;
font-style: normal;
font-weight: 600;
line-height: 26px;
margin: 10px 0 0 10px;
text-shadow: 1px 1px 0px #272424;
}
.card_title_3{
margin: 10px 0 0 10px;
width: 95%;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
text-shadow: 1px 1px 0px #272424;
}
summary{
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 26px;
margin: 0;
}
summary ~ * {
padding: 0 1em 10px 1.4em;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
.news_block_main {
margin: 0 16px 120px 16px;
}
.news_item {
margin-bottom: 20px;
}
.container_form_search_carrier{
flex-direction: column;
margin-top: 170px !important;
width: unset !important;
}
.header-second-item,
.header_btn_sender,
.header_btn_mover{
display: none!important;
}
}
@media (max-width: 992px) {
.benefit_img>img{
display: none;
}
}
/*END media breakpoints*/

View File

@@ -1,5 +1,7 @@
{% load i18n %} {% load i18n %}
{% load base_tags_extra %} {% load base_tags_extra %}
<div class="header_big_background">
</div>
<header id="header_bg"> <header id="header_bg">
<div class="header-first"> <div class="header-first">
<div class="header_logo"> <div class="header_logo">
@@ -37,7 +39,7 @@
</div> </div>
<div class="header-second"> <div class="header-second">
<div> <div class="header-second-item">
<div class="dropdown_lang"> <div class="dropdown_lang">
<div id="dropbtn_lang" class="dropbtn_lang">RU</div> <div id="dropbtn_lang" class="dropbtn_lang">RU</div>
<div class="dropdown-content-lang"> <div class="dropdown-content-lang">
@@ -103,4 +105,5 @@
</div> </div>
<div class="clear_both"></div> <div class="clear_both"></div>
</header> </header>
<div class="line_f_header"></div>

View File

@@ -34,8 +34,8 @@
<link rel="stylesheet" href="{% static 'css/styles.css' %}"> <link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" href="{% static 'css/styles(boris).css' %}" > <link rel="stylesheet" href="{% static 'css/styles(boris).css' %}" >
<link rel="stylesheet" href="{% static 'css/mobile_styles.css' %}">
<script src='{% static "js/find_route.js" %}'></script> <script src='{% static "js/find_route.js" %}'></script>
<script src="{% static "js/filters_functions_find_route.js" %}"></script> <script src="{% static "js/filters_functions_find_route.js" %}"></script>
@@ -52,17 +52,17 @@
{% endblock %} {% endblock %}
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper_main">
{# modifided by boris#}
<div class="header_big_background">
</div>
{% include 'blocks/b_header.html' %} {% include 'blocks/b_header.html' %}
<div class="line_f_header"></div> <div class="wrapper_content">
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</div>
</div> </div>
{% include 'blocks/b_footer.html' %} {% include 'blocks/b_footer.html' %}