Answer the question
In order to leave comments, you need to log in
Where to find where is the error in the adaptive version?
Something happened to the mobile layout, I can’t find where the error is, if you look from the phone it walks left and right
.block-index {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.block-title {
margin-top: 2rem;
width: 45%;
display: flex;
justify-content: center;
font-style: normal;
font-weight: bold;
font-size: 38px;
line-height: 46px;
text-align: center;
color: #454545;
padding-bottom: 4px;
}
.why-us {
margin-top: 6rem;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.underline-block {
width: 10%;
padding-bottom: 6px;
border-bottom: 10px solid #fbc61a;
}
.block-index__information {
width: 35%;
margin-top: 6rem;
margin-bottom: 6rem;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 40px;
color: #454545;
}
.block-index__information-bold {
color: #f0ac25;
font-weight: 600;
}
.why-us__text {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.why-us__text-block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 1rem;
margin-bottom: 1rem;
}
.why-us__text-block:nth-child(1) {
margin-top: 0rem;
}
.why-us__text-number {
color: #f0ac25;
font-weight: 600;
font-size: 6rem;
}
.why-us__text-descrition {
color: #454545;
font-weight: 600;
font-size: 14px;
}
.block-advantages {
width: 50%;
display: flex;
justify-content: space-around;
align-items: center;
}
.advantages-information {
width: 33%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.advantages-information span {
width: 70%;
font-style: normal;
font-weight: 550;
font-size: 18px;
line-height: 29px;
text-align: center;
color: #454545;
}
.image-sale {
margin-top: 4rem;
}
.our-advantage {
margin-top: 6rem;
width: 100%;
background: #fbc61a;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.our-advantage__title {
margin-top: 2rem;
font-style: normal;
font-weight: bold;
font-size: 48px;
line-height: 59px;
color: #ffffff;
}
.our-advantage__text {
font-style: normal;
font-weight: bold;
font-size: 22px;
line-height: 29px;
color: #454545;
}
.our-advantage__blocks {
margin-top: 4rem;
margin-bottom: 6rem;
width: 40%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.our-advantage__block {
width: 362px;
height: 175px;
background: #ffffff;
box-shadow: -10px 30px 80px rgba(109, 109, 109, 0.25);
border-radius: 20px;
display: flex;
align-items: center;
align-items: center;
margin-top: 1rem;
margin-bottom: 1rem;
}
.our-advantage__block img {
margin-left: 1rem;
}
.our-advantage__block-texts {
margin-left: 1rem;
}
.our-advantage__block-texts span {
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 22px;
color: #454545;
}
.our-advantage__block-texts p {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: #454545;
}
.block-catalog__information {
width: 35%;
margin-top: 3rem;
margin-bottom: 3rem;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 40px;
color: #454545;
}
.block-catalog__photo {
margin-top: 2rem;
width: 60%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.block-catalog__photo-text {
width: 40%;
margin-top: 4rem;
margin-bottom: 3rem;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 40px;
color: #454545;
}
.block-catalog__photo-text2 {
margin-top: 1rem;
font-size: 1.3rem;
}
.block-catalog__photo-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 0.5rem;
margin-bottom: 1rem;
position: relative;
}
.photo-block__first {
display: flex;
justify-content: center;
align-items: center;
}
.photo-block__second {
top: 0;
bottom: 40px;
left: 0;
right: 0;
opacity: 0;
background: linear-gradient(
304.04deg,
rgba(251, 198, 26, 0.85) 14.62%,
rgba(239, 167, 22, 0.31) 83.36%
);
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in;
}
.photo-block__second p {
font-style: normal;
font-weight: bold;
font-size: 24px;
color: #ffffff;
}
.photo-block__second span {
font-style: normal;
font-weight: 600;
font-size: 48px;
color: #ffffff;
margin-top: 1rem;
margin-bottom: 1rem;
}
.size-small {
font-size: 40px !important;
}
.small-size-two {
text-align: center;
font-size: 36px !important;
}
.photo-block__second a {
font-style: normal;
font-weight: 600;
font-size: 20px;
color: #000000;
text-decoration: none;
transition: all 0.2s ease-in;
}
.photo-block__second a:hover {
transition: all 0.2s ease-in;
opacity: 0.5;
}
.block-catalog__photo-block:hover .photo-block__second {
opacity: 1;
transition: all 0.2s ease-in;
}
.block-service__photo {
margin-top: 2rem;
width: 60%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.block-service__photo-text {
width: 40%;
margin-top: 4rem;
margin-bottom: 3rem;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 40px;
color: #454545;
}
.block-service__photo-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 0.5rem;
margin-bottom: 1rem;
position: relative;
}
.service-block__first {
display: flex;
justify-content: center;
align-items: center;
}
.service-block__second {
top: 0;
left: 0;
right: 0;
opacity: 0;
bottom: 37px;
padding-bottom: 10px;
background: rgba(69, 69, 69, 0.47);
border-radius: 20px;
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
transition: all 0.2s ease-in;
}
.service-block__second span {
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 29px;
color: #ffffff;
}
.service-block__second p {
width: 90%;
text-align: center;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 22px;
color: #ffffff;
}
.service-block__second a {
width: 70%;
padding: 1rem;
color: #ffffff;
background: #efa716;
box-shadow: 0px 4px 40px rgba(239, 167, 22, 0.38);
border-radius: 40px;
text-decoration: none;
text-align: center;
transition: all 0.2s ease-in;
}
.service-block__second a:hover {
transition: all 0.2s ease-in;
background: #000000;
}
.block-service__photo-block:hover .service-block__second {
opacity: 1;
transition: all 0.2s ease-in;
}
.service-text {
margin-top: 0.5rem;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 29px;
color: #454545;
}
.our-client {
margin-top: 6rem;
width: 100%;
background: #efa716;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.our-client__title {
margin-top: 2rem;
font-style: normal;
font-weight: bold;
font-size: 48px;
line-height: 59px;
color: #ffffff;
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question