KevinMidboe/planetposen
1
0
Fork 0
mirror of https://github.com/KevinMidboe/planetposen.git synced 2025-10-29 17:50:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimized positioning for mobile.

Browse Source
This commit is contained in:
Kevin
2020-07-21 20:22:19 +02:00
parent 9fbb163dde
commit adbd85197f
1 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/components/Contact.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<main role="main"> <main role="main">
<div class="banner blue-background"> <div class="banner bg-blue">
<div class="banner-content top-show col-wrap max-width"> <div class="banner-content top-show col-wrap max-width">
<h1>Kontakt oss</h1> <h1>Kontakt oss</h1>
@@ -55,30 +55,39 @@ export default {
height: 100%; height: 100%;
width: 100%; width: 100%;
&.blue-background {
background-color: var(--color-background-blue);
color: black; color: black;
}
&-content { &-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center;
padding-top: var(--space-xxxxl); padding-top: var(--space-xxxxl);
p { @include mobile {
font-size: var(--text-md); padding-top: var(--space-xxl);
} }
@include mobile { p {
flex-direction: column-reverse; font-size: var(--text-md);
} }
} }
} }
section.contact { section.contact {
margin: 6rem auto 0 auto; margin: 3rem auto;
overflow: auto;
h3 {
margin-top: 2rem;
}
}
@include mobile {
.col-6 {
width: 100%;
}
} }
img { img {