Infrastructure/www-2021
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix alignment issue in TPN

Browse source
This commit is contained in:
Daniel Vinci 2021-04-30 13:42:02 -06:00
parent f790bdca38
commit 59720edf54
No known key found for this signature in database
GPG key ID: 7A700C29916C26CA
1 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/TalkingPointName.svelte
View file

@ -1,14 +1,18 @@
<script> <script>
export let text = 'replace this' export let text = "replace this";
</script> </script>
<div class="talkingPointNameContainer">
<h2 class="talkingPointName">{text}</h2>
</div>
<style> <style>
.talkingPointNameContainer { .talkingPointNameContainer {
width: 100%; width: 100%;
height: 115px; height: 115px;
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: center; justify-content: flex-end;
background-color: #00111d; background-color: #00111d;
color: #ffffff; color: #ffffff;
} }
@ -21,6 +25,10 @@
} }
@media only screen and (max-device-width: 900px) and (orientation: portrait) { @media only screen and (max-device-width: 900px) and (orientation: portrait) {
.talkingPointNameContainer {
align-items: center;
justify-content: center;
}
.talkingPointNameContainer .talkingPointName { .talkingPointNameContainer .talkingPointName {
padding-top: 0; padding-top: 0;
padding-right: 0; padding-right: 0;
@ -28,7 +36,3 @@
} }
} }
</style> </style>
<div class="talkingPointNameContainer">
<h2 class="talkingPointName">{text}</h2>
</div>