Make things responsive

This commit is contained in:
Oliver Davies 2020-09-08 22:28:56 +01:00
parent f010496cfd
commit c4111ac571
3 changed files with 4 additions and 4 deletions

View file

@ -18,8 +18,8 @@
</aside> </aside>
<footer class="py-20 bg-black"> <footer class="py-20 bg-black">
<div class="max-w-6xl mx-auto"> <div class="max-w-6xl mx-auto px-4">
<div class="grid grid-cols-3"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<section> <section>
<h2 class="pb-2 text-xl font-bold border-b-2 text-white">Links</h2> <h2 class="pb-2 text-xl font-bold border-b-2 text-white">Links</h2>

View file

@ -4,7 +4,7 @@
<div class="mt-10"> <div class="mt-10">
<div class="max-w-6xl mx-auto px-4"> <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"> <div v-for="(sponsor, i) in sponsors" :key="i">
<sponsor :sponsor="sponsor"/> <sponsor :sponsor="sponsor"/>
</div> </div>

View file

@ -3,7 +3,7 @@
<div class="mx-auto px-4"> <div class="mx-auto px-4">
<h2 class="text-2xl font-bold uppercase text-center">Recent Talks</h2> <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"/> <recent-talk v-for="(talk, i) in talks" :key="i" :talk="talk"/>
</div> </div>
</div> </div>