diff --git a/src/components/ContentSelection.vue b/src/components/ContentSelection.vue index b3a584c..c7bd3f2 100644 --- a/src/components/ContentSelection.vue +++ b/src/components/ContentSelection.vue @@ -127,7 +127,7 @@ } .tag { - margin-top: 10px; + margin: 10px; } } } diff --git a/src/components/InstanceCard.vue b/src/components/InstanceCard.vue index 3abba77..40b4b4a 100644 --- a/src/components/InstanceCard.vue +++ b/src/components/InstanceCard.vue @@ -167,7 +167,12 @@ .tags { display: flex; + flex-wrap: wrap; margin-top: auto; + + .tag { + margin-bottom: 5px; + } } } diff --git a/src/scss/main.scss b/src/scss/main.scss index 0c11fc0..69d8168 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -129,7 +129,7 @@ p > a { @media screen and (max-width: $small-screen) { width: 100% !important; min-width: unset !important; - padding: 0 5px !important; + padding: 5px !important; } } @@ -240,6 +240,15 @@ p > a { & + .bottom-two-columns { margin-top: 10px; } + + @media screen and (max-width: $small-screen) { + width: 100%; + margin: 20px auto 0; + + &.citation { + margin: 20px auto; + } + } } .bottom-link-wrapper { @@ -320,9 +329,10 @@ p > a { font-size: 14px; min-width: 140px; padding: 0 10px; - height: 25px; + min-height: 25px; display: flex; align-items: center; justify-content: center; + text-align: center; width: fit-content; } diff --git a/src/views/Help.vue b/src/views/Help.vue index b5e9ece..fb345da 100644 --- a/src/views/Help.vue +++ b/src/views/Help.vue @@ -179,7 +179,7 @@ } .image-block { - margin: 40px 0; + margin: 40px 0 !important; } } } diff --git a/src/views/Home.vue b/src/views/Home.vue index 792a0ca..28c7533 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -449,7 +449,7 @@ .discover-instances { min-width: 420px; width: fit-content; - height: 50px; + min-height: 50px; margin: 50px auto; font-size: 20px; }