Add responsive on Homepage elements

2021-10-01 23:43:00 +02:00
parent f1ddc05d17
commit 57a12487a3
7 changed files with 169 additions and 56 deletions
--- a/src/components/molecules/Location.svelte
+++ b/src/components/molecules/Location.svelte
@@ -57,18 +57,20 @@
        on:mouseleave={handleMouseLeave}
        sveltekit-noscroll
    >
-        <Image id={country.flag.id} alt="Flag of {country.name}" width={32} height={32} />
-        <dl>
-            <dt class="location__name">
-                {name}
-            </dt>
-            <dd class="location__country text-label">
-                {country.name}
-            </dd>
-        </dl>
-        {#if isNew}
-            <Badge text="New" />
-        {/if}
+        <Image class="location__flag" id={country.flag.id} alt="Flag of {country.name}" width={32} height={32} />
+        <div class="text">
+            <dl>
+                <dt class="location__name">
+                    {name}
+                </dt>
+                <dd class="location__country text-label">
+                    {country.name}
+                </dd>
+            </dl>
+            {#if isNew}
+                <Badge text="New" />
+            {/if}
+        </div>
    </a>
    <div class="location__photos">
        <span>{photoIndex}</span>