Skip to content

Commit d3c68ae

Browse files
3004Kristina3004Kristina
committed
add mobile styles
1 parent 14a3d6d commit d3c68ae

File tree

5 files changed

+409
-73
lines changed

5 files changed

+409
-73
lines changed

‎landing_page/mainpage/static/css/style.css‎

Lines changed: 320 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3427,7 +3427,7 @@ ul.installment-plan li:before {
34273427
}
34283428

34293429
.counter {
3430-
padding: 9px 0;
3430+
padding: 9px 0 30px;
34313431
}
34323432

34333433
.price-second-container {
@@ -4010,7 +4010,7 @@ ul.installment-plan li:before {
40104010
}
40114011
}
40124012

4013-
.price-list {
4013+
.price-second .price-list {
40144014
display: flex;
40154015
flex-direction: row;
40164016
justify-content: center;
@@ -4157,7 +4157,145 @@ ul.installment-plan li:before {
41574157
flex-direction: row;
41584158
justify-content: flex-end;
41594159
padding: 44px 25px 0 0;
4160+
}
4161+
4162+
.city-list{
4163+
list-style: none;
4164+
margin: 0;
4165+
padding: 0 370px 0 0;
4166+
}
4167+
4168+
.city-list ::-webkit-scrollbar-thumb {
4169+
background: red;
4170+
border-radius: 10px;
4171+
}
4172+
4173+
.simplebar-scrollbar::before {
4174+
background-color: rgba(45, 156, 219, 0.6);
4175+
border-radius: 12px;
4176+
height: 472px;
4177+
}
4178+
4179+
.city-list li a{
4180+
display: block;
4181+
text-decoration: none;
4182+
font-family: 'Ubuntu', sans-serif;
4183+
font-style: normal;
4184+
font-weight: 700;
4185+
font-size: 36px;
4186+
line-height: 1.2;
4187+
text-transform: uppercase;
4188+
color: #FFFFFF;
4189+
padding: 16px 0;
4190+
}
4191+
4192+
.city-list li a.active{
4193+
color: #F2C94C;
4194+
}
4195+
4196+
.city-list li a:hover{
4197+
color: #F2C94C;
4198+
}
4199+
4200+
@media (max-width: 1600px){
4201+
.offline-map-city-list{
4202+
width: 400px;
4203+
}
4204+
4205+
.city-list{
4206+
padding: 0 280px 0 0;
4207+
}
4208+
4209+
.city-list li a{
4210+
font-size: 27px;
4211+
padding: 13px 0;
4212+
}
4213+
}
4214+
4215+
@media (max-width: 1160px){
4216+
.offline-map-wrapper{
4217+
display: block;
4218+
}
4219+
4220+
.offline-map-city-list{
4221+
width: 100%;
4222+
height: auto;
4223+
flex-shrink: unset;
4224+
background-color: #333333;
4225+
display: flex;
4226+
flex-direction: row;
4227+
justify-content: flex-start;
4228+
padding: 30px 25px;
4229+
}
4230+
4231+
.city-list{
4232+
padding: 0;
4233+
display: flex;
4234+
flex-direction: row;
4235+
flex-wrap: wrap;
4236+
justify-content: flex-start;
4237+
}
4238+
4239+
.city-list li a{
4240+
width: max-content;
4241+
padding: 13px;
4242+
}
4243+
}
4244+
4245+
@media (max-width: 992px) {
4246+
.counter .pc-section-header {
4247+
padding-bottom: 0px;
4248+
}
4249+
4250+
.counter .pc-section-header h2 {
4251+
text-align: left;
4252+
text-transform: uppercase;
4253+
font-size: 1.4rem;
4254+
color: #333333;
4255+
}
4256+
4257+
.offline-map {
4258+
padding: 0px;
4259+
}
4260+
4261+
.offline-map .pc-section-header h2 {
4262+
text-align: left;
4263+
text-transform: uppercase;
4264+
font-size: 1.4rem;
4265+
color: #333333;
4266+
margin-bottom: 32px;
4267+
}
4268+
4269+
.offline-map .pc-section-header h2 br{
4270+
display: none;
4271+
}
4272+
4273+
.offline-map .pc-section-header {
4274+
padding-bottom: 0;
4275+
}
4276+
4277+
.city-list li a {
4278+
font-size: 23px;
4279+
}
4280+
}
4281+
4282+
@media (max-width: 600px){
4283+
.offline-map-city-list{
4284+
padding: 15px;
4285+
}
41604286

4287+
.city-list{
4288+
justify-content: center;
4289+
}
4290+
4291+
.city-list li a{
4292+
padding: 10px;
4293+
font-size: 16px;
4294+
}
4295+
4296+
.price-second .price-list{
4297+
flex-direction: column;
4298+
}
41614299
}
41624300

41634301
.offline_city_content_wrapper h3{
@@ -4266,6 +4404,174 @@ ul.installment-plan li:before {
42664404
height: 826px;
42674405
}
42684406

4407+
@media (max-width: 992px) {
4408+
4409+
#offline-map{
4410+
height: 560px;
4411+
margin-bottom: 30px;
4412+
}
4413+
}
4414+
4415+
@media (max-width: 760px){
4416+
#offline-map{
4417+
height: 400px;
4418+
}
4419+
4420+
.offline_city_content_wrapper h3{
4421+
font-size: 20px;
4422+
margin: 0 0 24px;
4423+
}
4424+
4425+
.offline_city_content_list{
4426+
margin: 0 -10px;
4427+
}
4428+
4429+
.offline_city_content_item{
4430+
width: calc(100%/2 - 20px);
4431+
margin: 0 10px;
4432+
}
4433+
4434+
.offline_city_content_item button{
4435+
width: 100%;
4436+
height: 40px;
4437+
font-size: 12px;
4438+
border-radius: 54px;
4439+
}
4440+
4441+
.offline_city_content_item .title{
4442+
font-size: 14px;
4443+
line-height: 1.2;
4444+
margin: 0 0 5px;
4445+
}
4446+
4447+
.offline_city_content_item .offline_date{
4448+
font-size: 14px;
4449+
line-height: 1.2;
4450+
}
4451+
4452+
.offline_city_content_item .offline_price{
4453+
font-size: 20px;
4454+
line-height: 1.2;
4455+
margin: 0 0 25px;
4456+
}
4457+
4458+
.offline_city_content_item .decr-price{
4459+
font-size: 14px;
4460+
line-height: 1.2;
4461+
margin: 0 0 25px;
4462+
}
4463+
4464+
4465+
}
4466+
4467+
@media (max-width: 500px){
4468+
#offline-map{
4469+
height: 400px;
4470+
}
4471+
4472+
.offline_city_content_wrapper h3{
4473+
font-size: 18px;
4474+
margin: 0 0 24px;
4475+
}
4476+
4477+
.offline_city_content_list{
4478+
margin: 0 -5px;
4479+
}
4480+
4481+
.offline_city_content_item{
4482+
width: calc(100%/2 - 10px);
4483+
margin: 0 5px;
4484+
}
4485+
4486+
.offline_city_content_item button{
4487+
width: 100%;
4488+
height: 34px;
4489+
font-size: 11px;
4490+
border-radius: 54px;
4491+
}
4492+
4493+
.offline_city_content_item .title{
4494+
font-size: 13px;
4495+
line-height: 1.2;
4496+
margin: 0 0 5px;
4497+
}
4498+
4499+
.offline_city_content_item .offline_date{
4500+
font-size: 14px;
4501+
line-height: 1.2;
4502+
}
4503+
4504+
.offline_city_content_item .offline_price{
4505+
font-size: 18px;
4506+
line-height: 1.2;
4507+
margin: 0 0 25px;
4508+
}
4509+
4510+
.offline_city_content_item .decr-price{
4511+
font-size: 14px;
4512+
line-height: 1.2;
4513+
margin: 0 0 25px;
4514+
}
4515+
4516+
4517+
}
4518+
4519+
@media (max-width: 400px){
4520+
#offline-map{
4521+
height: 550px;
4522+
}
4523+
4524+
.offline_city_content_wrapper h3{
4525+
font-size: 16px;
4526+
margin: 0 0 25px;
4527+
}
4528+
4529+
.offline_city_content_list{
4530+
flex-direction: column;
4531+
margin: 0;
4532+
}
4533+
4534+
.offline_city_content_item{
4535+
width: 100%;
4536+
}
4537+
4538+
.offline_city_content_item + .offline_city_content_item{
4539+
margin-top: 20px;
4540+
}
4541+
4542+
.offline_city_content_item button{
4543+
width: 100%;
4544+
height: 34px;
4545+
font-size: 11px;
4546+
border-radius: 54px;
4547+
}
4548+
4549+
.offline_city_content_item .title{
4550+
font-size: 13px;
4551+
line-height: 1.2;
4552+
margin: 0 0 5px;
4553+
}
4554+
4555+
.offline_city_content_item .offline_date{
4556+
font-size: 14px;
4557+
line-height: 1.2;
4558+
}
4559+
4560+
.offline_city_content_item .offline_price{
4561+
font-size: 18px;
4562+
line-height: 1.2;
4563+
margin: 0 0 15px;
4564+
}
4565+
4566+
.offline_city_content_item .decr-price{
4567+
font-size: 14px;
4568+
line-height: 1.2;
4569+
margin: 0 0 25px;
4570+
}
4571+
4572+
4573+
}
4574+
42694575
#offline-map .ymaps-2-1-78-balloon,
42704576
#offline-map .ymaps-2-1-78-balloon *,
42714577
#offline-map .ymaps-2-1-78-balloon *:before,
@@ -4297,46 +4603,24 @@ ul.installment-plan li:before {
42974603
height: 100%;
42984604
}
42994605

4300-
.city-list{
4301-
list-style: none;
4302-
margin: 0;
4303-
padding: 0 370px 0 0;
4304-
4305-
}
4306-
4307-
.city-list ::-webkit-scrollbar-thumb {
4308-
background: red;
4309-
border-radius: 10px;
4310-
}
4311-
4312-
.simplebar-scrollbar::before {
4313-
background-color: rgba(45, 156, 219, 0.6);
4314-
border-radius: 12px;
4315-
height: 472px;
4316-
}
4317-
4318-
.city-list li a{
4319-
display: block;
4320-
text-decoration: none;
4321-
font-family: 'Ubuntu', sans-serif;
4322-
font-style: normal;
4323-
font-weight: 700;
4324-
font-size: 36px;
4325-
line-height: 1.2;
4326-
text-transform: uppercase;
4327-
color: #FFFFFF;
4328-
padding: 16px 0;
4606+
@media (max-width: 760px){
4607+
#offline-map .ymaps-2-1-78-balloon__content > ymaps[id] {
4608+
padding: 20px;
4609+
}
43294610
}
43304611

4331-
.city-list li a.active{
4332-
color: #F2C94C;
4612+
@media (max-width: 500px){
4613+
#offline-map .ymaps-2-1-78-balloon__content > ymaps[id] {
4614+
padding: 12px;
4615+
}
43334616
}
43344617

4335-
.city-list li a:hover{
4336-
color: #F2C94C;
4618+
@media (max-width: 400px){
4619+
#offline-map .ymaps-2-1-78-balloon__content > ymaps[id] {
4620+
padding: 17px;
4621+
}
43374622
}
43384623

4339-
43404624
@media (max-width: 992px) {
43414625
.labor-program .schedule-item h4 {
43424626
font-size: 1rem;

0 commit comments

Comments
 (0)