Improve look of pricing section on different screen sizes

johnjago · Jul 23, 2024 · 49367e6 · 49367e6
1 parent 44588de
commit 49367e6
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/layouts/index.html b/layouts/index.html
@@ -297,8 +297,8 @@ <h3 class="text-2xl font-semibold mb-3">Future WooCommerce upgrades</h3>
 </section>
 <section id="pricing" class="py-16 px-4 bg-gray-50 border-t scroll-mt-16">
 	<h2 class="text-3xl md:text-4xl text-center font-bold text-gray-800 mb-12">Pricing</h2>
-	<div class="flex flex-col md:flex-row flex-wrap justify-evenly mb-8 gap-16 max-w-7xl mx-auto">
-		<div class="flex flex-col w-full lg:w-2/5 text-gray-700 bg-gray-100 border border-gray-200 p-16 rounded-lg">
+	<div class="flex flex-col lg:flex-row flex-wrap justify-evenly mb-8 gap-8 max-w-xl lg:max-w-7xl mx-auto">
+		<div class="flex flex-col w-full lg:w-2/5 text-gray-700 bg-gray-100 border border-gray-200 p-8 sm:p-16 rounded-lg">
 			<h3 class="text-2xl font-semibold mb-4">Free</h3>
 			<p>Better order management at no cost.</p>
 			<ul class="my-8 divide-y divide-gray-400 flex flex-col">
@@ -340,7 +340,7 @@ <h3 class="text-2xl font-semibold mb-4">Free</h3>
 				Download
 			</a>
 		</div>
-		<div class="flex flex-col w-full lg:w-2/5 text-gray-700 bg-gray-100 border border-gray-200 p-16 rounded-lg">
+		<div class="flex flex-col w-full lg:w-2/5 text-gray-700 bg-gray-100 border border-gray-200 p-8 sm:p-16 rounded-lg">
 			<div class="flex justify-between items-center mb-4">
 				<h3 class="text-2xl font-semibold">Pro — <b>$3 USD</b> per month, per site</h3>
 			</div>