diff --git a/website/src/pages/service/service.scss b/website/src/pages/service/service.scss index e9057d38970a461c29c140815bd53367ed1f15b4..91873aa070c1464ee04d6107fa5f21a70f6658c3 100644 --- a/website/src/pages/service/service.scss +++ b/website/src/pages/service/service.scss @@ -22,7 +22,7 @@ } &.img-right { - grid-template-columns: 300px auto; + grid-template-columns: auto 300px; img { grid-column: 2; @@ -40,9 +40,10 @@ .mail-icon { font-size: 40px; position: relative; - top: 2px; + color: $light_0; } + .contact-button { display: flex; align-items: center; @@ -100,7 +101,7 @@ } &::before { - content: "\1F7E2\0020"; // A green spot and a space + content: "âš™ï¸\0020"; // A gear and a space vertical-align: middle; } } @@ -152,6 +153,85 @@ } } } + + @media screen and (max-width:$screen_m) { + gap: 20px; + padding: 20px; + + &:not(:first-child) { + margin-top: 40px; + } + + img { + width: 200px; + height: auto; + max-width: 100%; + grid-row: 1; + grid-column: 1; + margin: 0 auto; + } + + &.img-left, + &.img-right { + grid-template-columns: 1fr; + + img { + grid-row: 1; + grid-column: 1; + } + } + + .mail-icon { + font-size: 30px; + } + + .contact-button { + .btn-text { + font-size: 20px; + } + } + + h3 { + color: $blue_2; + font-size: 22px; + } + + .section-data { + min-height: unset; + + p { + max-width: unset; + } + } + + &.techno { + &>ul { + grid-template-columns: 1fr; + gap: 25px; + + li { + grid-template-columns: 80px auto; + + img { + width: 80px; + height: 80px; + } + + .tech-txt { + + h4 { + font-size: 17px; + } + + p { + max-width: unset; + } + } + + } + } + } + } } } } \ No newline at end of file