Fixed responsiviness prices section

Nrosa01 · Jun 16, 2023 · 77884a9 · 77884a9
1 parent 3ff743b
commit 77884a9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/src/components/SvelteGallery/lib/PriceListing.svelte b/src/components/SvelteGallery/lib/PriceListing.svelte
@@ -1,28 +1,31 @@
 <script>
-    import Gallery from "./Gallery.svelte";
-    const prices_classes = "text-black xl:text-2xl text-xs font-bold quicksand py-2 bg-beauty px-4 rounded-full w-fit"
+  import Gallery from "./Gallery.svelte";
+  const prices_classes =
+    "text-black xl:text-2xl text-xs font-bold quicksand py-2 bg-beauty px-4 rounded-full md:w-fit w-full";
 
-    export let category;
+  export let category;
 </script>
 
-
 <section>
-    <h2 class="title">{category.title}</h2>
-    <p
-      class="text-white xl:text-base text-sm font-bold quicksand xl:py-8 py-4">
-      {category.description}
-    </p>
+  <h2 class="title">{category.title}</h2>
+  <p class="text-white xl:text-base text-sm font-bold quicksand xl:py-8 py-4">
+    {category.description}
+  </p>
 
-    <Gallery images="{category.images}" />
+  <Gallery images="{category.images}" />
 
-    <div class="w-full pt-8 flex justify-center gap-4 place-items-center">
+  <div class="w-full pt-8 flex justify-center gap-4 place-items-center">
+    <ul class="flex flex-wrap w-full h-fit justify-center gap-4">
       {#each category.prices as price, index}
-      <h3 class="{prices_classes}">
-        {price.title} <span class="quicksand-bold"
-        >{price.price}</span
-        ><span class="font-semibold font-sans">€</span> {price.post_title}
-      </h3>
+        <li class="md:w-fit w-full">
+          <h3 class="{prices_classes}">
+            {price.title} <span class="quicksand-bold">{price.price}</span><span
+              class="font-semibold font-sans">€</span>
+            {price.post_title}
+          </h3>
+        </li>
       {/each}
-    </div>
-    <hr class="my-12 h-0.5 border-t-0 bg-neutral-100/10" />
-  </section>
+    </ul>
+  </div>
+  <hr class="my-12 h-0.5 border-t-0 bg-neutral-100/10" />
+</section>
diff --git a/src/components/SvelteGallery/lib/PricesSection.svelte b/src/components/SvelteGallery/lib/PricesSection.svelte
@@ -72,7 +72,7 @@
 </script>
 
 <div
-  class="w-full text-center items-center justify-center place-content-center flex flex-col bg-black">
+  class="w-full text-center items-center justify-center place-content-center flex flex-col">
   {#each categories as category, index}
     <PriceListing category="{category}" />
   {/each}