From c4111ac5713279d7e5012f1de6ff83e022c1a90c Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 8 Sep 2020 22:28:56 +0100
Subject: [PATCH] Make things responsive
---
src/App.vue | 4 ++--
src/components/our-sponsors/index.vue | 2 +-
src/components/recent-talks/index.vue | 2 +-
3 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 80affef..7489b0e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,8 +18,8 @@
</aside>
<footer class="py-20 bg-black">
- <div class="max-w-6xl mx-auto">
- <div class="grid grid-cols-3">
+ <div class="max-w-6xl mx-auto px-4">
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<section>
<h2 class="pb-2 text-xl font-bold border-b-2 text-white">Links</h2>
diff --git a/src/components/our-sponsors/index.vue b/src/components/our-sponsors/index.vue
index 1a01415..8754c21 100644
--- a/src/components/our-sponsors/index.vue
+++ b/src/components/our-sponsors/index.vue
@@ -4,7 +4,7 @@
<div class="mt-10">
<div class="max-w-6xl mx-auto px-4">
- <div class="grid grid-cols-3 gap-16">
+ <div class="grid grid-cols-1 gap-16 sm:grid-cols-2 md:grid-cols-3">
<div v-for="(sponsor, i) in sponsors" :key="i">
<sponsor :sponsor="sponsor"/>
</div>
diff --git a/src/components/recent-talks/index.vue b/src/components/recent-talks/index.vue
index 74941f1..0a352d4 100644
--- a/src/components/recent-talks/index.vue
+++ b/src/components/recent-talks/index.vue
@@ -3,7 +3,7 @@
<div class="mx-auto px-4">
<h2 class="text-2xl font-bold uppercase text-center">Recent Talks</h2>
- <div class="mt-2 grid grid-cols-4 gap-8">
+ <div class="mt-2 grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
<recent-talk v-for="(talk, i) in talks" :key="i" :talk="talk"/>
</div>
</div>