Make donation option boxes responsive
This commit is contained in:
parent
e2682cc1f8
commit
410d7dd828
2 changed files with 4 additions and 4 deletions
|
@ -112,11 +112,11 @@
|
|||
</div>
|
||||
<!-- Here, the floating donation box ceases to float -->
|
||||
|
||||
<div class="text-green-900 w-full md:w-3/5 lg:w-3/40">
|
||||
<div class="w-full">
|
||||
<div class="max-w-4xl mx-auto p-10">
|
||||
<h1 class="text-center text-2xl font-sans">Donation options</h1>
|
||||
|
||||
<ul class="my-10 grid grid-cols-3 gap-3">
|
||||
<ul class="my-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
|
||||
<label class="donate-option">
|
||||
<input type="radio" name="amount" value="250">
|
||||
<li>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
|
||||
.donate-option > li {
|
||||
@apply row-auto text-center inline-block p-10 bg-white rounded-md text-black border-2 border-white hover:border-green-500 hover:cursor-pointer h-full;
|
||||
@apply row-auto text-center inline-block p-10 bg-white rounded-md text-black border-2 border-white hover:border-green-500 hover:cursor-pointer h-full w-full;
|
||||
}
|
||||
|
||||
.donate-option > input:checked + li {
|
||||
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
.input-custom {
|
||||
@apply bg-inherit border-inherit inline-block text-center overflow-visible p-3;
|
||||
@apply bg-inherit border-inherit inline-block text-center overflow-visible p-3 mx-auto;
|
||||
}
|
||||
|
||||
.donate-option > input:checked + li:hover .input-custom {
|
||||
|
|
Loading…
Reference in a new issue