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:
@@ -38,22 +38,22 @@ const ContactUsForm = ({
|
||||
};
|
||||
|
||||
const gridColsClass = {
|
||||
1: "md:grid-cols-1",
|
||||
2: "md:grid-cols-2",
|
||||
3: "md:grid-cols-3",
|
||||
4: "md:grid-cols-4",
|
||||
1: "lg:grid-cols-1",
|
||||
2: "lg:grid-cols-2",
|
||||
3: "lg:grid-cols-3",
|
||||
4: "lg:grid-cols-4",
|
||||
}[columnsPerRow];
|
||||
|
||||
const colSpanClass = {
|
||||
1: "md:col-span-1",
|
||||
2: "md:col-span-2",
|
||||
3: "md:col-span-3",
|
||||
4: "md:col-span-4",
|
||||
1: "lg:col-span-1",
|
||||
2: "lg:col-span-2",
|
||||
3: "lg:col-span-3",
|
||||
4: "lg:col-span-4",
|
||||
}[columnsPerRow];
|
||||
|
||||
return (
|
||||
<form
|
||||
className={`w-full px-4 md:px-16 py-10 grid ${gridColsClass} gap-4`}
|
||||
className={`w-full px-4 lg:px-16 py-10 grid ${gridColsClass} gap-4`}
|
||||
onSubmit={handleSubmit(onSubmit)}>
|
||||
<InputGroup
|
||||
id="full_name"
|
||||
|
||||
Reference in New Issue
Block a user