fem-projects/contact-form
Archived
1
Fork 0
Code Activity

Make responsive

Browse source
This commit is contained in:
Hadeed 2024-06-09 02:25:56 +04:00
parent e96a574e2b
commit f7f2bf45fc
1 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app.jsx
View file

@ -50,7 +50,7 @@ export default function App() {
const [toastOpen, setToastOpen] = useState(false);
return (
<div className="min-h-dvh bg-green-200 px-200 py-400">
<div className="flex min-h-dvh flex-col items-center justify-center bg-green-200 px-200 py-400">
<Toast.Provider>
<Toast.Viewport className="left-0 top-0 fixed flex w-full justify-center p-300" />
<div className="rounded-2xl bg-white p-300 text-grey-900">
@ -63,6 +63,7 @@ export default function App() {
<h1 className="text-heading">Contact Us</h1>
<div className="mt-400 space-y-300">
<div className="flex flex-col gap-300 sm:flex-row sm:gap-200">
<InputField
register={register}
errors={errors}
@ -75,6 +76,7 @@ export default function App() {
label="Last Name"
required
/>
</div>
<InputField
register={register}
errors={errors}
@ -98,7 +100,7 @@ export default function App() {
fieldState: { invalid },
}) => (
<RadioGroup.Root
className="space-y-200"
className="flex flex-col gap-200 sm:flex-row"
value={value}
onValueChange={onChange}
>
@ -133,7 +135,7 @@ export default function App() {
errors={errors}
label="Message"
type="textarea"
rows="4"
rows="3"
required
/>
</div>