snipette/snipette-crowdfunding-site
snipette/snipette-crowdfunding-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make donation option boxes responsive

Browse source
This commit is contained in:
Hippo 2021-12-28 18:04:10 +05:30
parent e2682cc1f8
commit 410d7dd828
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/index.htm
View file

@ -112,11 +112,11 @@
</div> </div>
<!-- Here, the floating donation box ceases to float --> <!-- 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"> <div class="max-w-4xl mx-auto p-10">
<h1 class="text-center text-2xl font-sans">Donation options</h1> <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"> <label class="donate-option">
<input type="radio" name="amount" value="250"> <input type="radio" name="amount" value="250">
<li> <li>

4
src/style.css
View file

@ -7,7 +7,7 @@
} }
.donate-option > li { .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 { .donate-option > input:checked + li {
@ -15,7 +15,7 @@
} }
.input-custom { .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 { .donate-option > input:checked + li:hover .input-custom {