refactor(responsive): Adjust breakpoint from md to lg for better layout

The previous `md` breakpoint (768px) caused the desktop layout to activate too early, resulting in a cramped appearance on tablet-sized screens.

This commit updates the responsive design by changing the primary breakpoint from `md` to `lg` (1024px) across the home page, contact page, and main layouts. This change ensures a more appropriate and visually balanced layout is maintained on medium-sized devices, improving the overall user experience.
This commit is contained in:
AmirReza Jamali
2025-10-26 10:42:13 +03:30
parent a78726303a
commit 3d626daa0a
11 changed files with 64 additions and 63 deletions
+2 -2
View File
@@ -3,14 +3,14 @@ import ContactUsForm from "./form";
const ContactUs = () => {
return (
<div className="flex flex-col items-center mt-16 px-8 ">
<div className="md:w-2/3 m-auto flex flex-col gap-4 mb-12">
<div className="lg:w-2/3 m-auto flex flex-col gap-4 mb-12">
<h2 className="font-bold text-4xl">Unlock Your Growth Potential</h2>
<p className="font-normal text-[16px] text-gray-600">
Register for early access and a free consultation. Let's start winning
together.
</p>
</div>
<section className="border border-gray-300 rounded-4xl w-full md:max-w-2/3 flex flex-col items-center bg-white">
<section className="border border-gray-300 rounded-4xl w-full lg:max-w-2/3 flex flex-col items-center bg-white">
<ContactUsForm />
</section>
</div>