fix: Services-Seite ist jetzt responsive.

This commit is contained in:
muli 2023-06-04 21:57:20 +02:00
parent fc7f763685
commit e784cc3b5e
1 changed files with 101 additions and 1 deletions

View File

@ -874,6 +874,15 @@ hr.-even {
color: var(--wtf-orange);
margin-bottom: 0.5rem;
}
.servies_card__img_credits {
font-size: 0.8rem;
color: var(--wtf-dark-grey);
}
.servies_card__img_credits a {
color: var(--wtf-dark-blue);
}
/* services_cards - end */
/* bubble_gird - start */
@ -986,7 +995,6 @@ hr.-even {
}
.content__box,
.contact__box,
.content__half_box,
@ -1401,6 +1409,30 @@ footer {
margin-top: 0;
padding-top: 0;
}
.services_box {
display: block;
margin: 0 1.5rem 3rem 1.5rem;
}
.services_box h1 {
color: var(--wtf-orange);
background-image: unset;
margin-bottom: 1rem;
}
.services_card_box {
margin: 0;
}
.bubble_grid {
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 10rem);
}
h1.big_heading {
font-size: 3.5rem;
}
}
@media screen and (max-width: 789px) and (min-width: 596px) {
@ -1579,6 +1611,35 @@ footer {
.pod_ctrl_box {
margin-top: 1.5rem;
}
.content__box.-card_box.-homepage {
margin-top: 0;
padding-top: 0;
}
.services_box {
display: block;
margin: 0 1.5rem 3rem 1.5rem;
}
.services_box h1 {
color: var(--wtf-orange);
background-image: unset;
margin-bottom: 1rem;
}
.services_card_box {
margin: 0;
}
.bubble_grid {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(6, 10rem);
}
h1.big_heading {
font-size: 3.5rem;
}
}
@media screen and (max-width: 595px) {
@ -1838,6 +1899,45 @@ footer {
.pod_ctrl_box {
margin-top: 1.5rem;
}
.services_box {
display: block;
margin: 0 1.5rem 3rem 1.5rem;
}
.services_box h1 {
color: var(--wtf-orange);
background-image: unset;
margin-bottom: 1rem;
}
.services_card_box {
margin: 0;
}
.services_card,
.services_card.-even {
flex-direction: column;
}
.services_card__text_box h2 {
margin-top: 0;
}
h1.big_heading {
font-size: 2.5rem;
}
.bubble_grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(11, 10rem);
}
.bubble_grid__card {
padding: 2rem;
grid-column: 1 / span 2;
grid-row: 2 / span 3;
}
/* content - end */
/* footer - start */