Hack an experiment at responsive design for mobile application alerts

openaustralia · Sep 20, 2023 · c4eb784 · c4eb784
1 parent 91a44ea
commit c4eb784
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/maizzle/src/components/application.html b/maizzle/src/components/application.html
@@ -6,10 +6,10 @@
 
 <table>
   <tr>
-    <td class="w-[180px]" valign="top">
+    <td class="w-[180px] xs:w-full xs:inline-block" valign="top">
       <img alt="Map of {{ address }}" src="https://maps.googleapis.com/maps/api/staticmap?key=AIzaSyCmdTv4mqSQKa2BfUvQUU3mEuj6vxnEiHI&amp;maptype=roadmap&amp;markers=color%3Ared%7C-33.90413%2C151.16163&amp;size=150x150&amp;zoom=16&amp;signature=i7QiFQ-M5phHMw9HKccQv-gReEc=" width="150" height="150">
     </td>
-    <td valign="top" class="h-[150px]">
+    <td valign="top" class="h-[150px] xs:w-full xs:inline-block xs:mt-4">
       <a href="#" class="text-navy dark-mode:text-white">
         <h2 class="m-0 text-lg font-bold">{{ address }}</h2>
       </a>

diff --git a/maizzle/src/templates/new-applications-alert.html b/maizzle/src/templates/new-applications-alert.html
@@ -8,15 +8,15 @@
 <x-standard>
   <table>
     <tr>
-      <td class="w-1/2">
+      <td class="w-1/2 xs:w-full xs:inline-block">
         <p>Hello,</p>
         <p>
           We found 2 new planning applications for you near 89
           Bridge Rd, Richmond VIC 3121.
         </p>
         <p>Thanks,<br>Planning Alerts team</p>      
       </td>
-      <td class="w-1/2" align="right">
+      <td class="w-1/2 text-right xs:text-left xs:w-full xs:inline-block">
         <img src="images/dancing-man.png">
       </td>
     </tr>