From f27ef0e113a59bf3e4af945e91311a5fa78b658b Mon Sep 17 00:00:00 2001
From: sonika <>
Date: Thu, 7 Sep 2023 17:08:28 +0530
Subject: [PATCH] responsive all sections

---
 .../PatientForm/FamilyFormSection2.tsx        | 94 +++++++++++++++---
 .../PatientForm/MedicalHistorySection3.tsx    | 70 ++++++++++++--
 src/Components/PatientForm/PastTreatment5.tsx | 27 +++++-
 .../RecreationalHobbiesSection7.tsx           | 96 +++++++++++++++----
 .../PatientForm/SyestemReviewSection6.tsx     | 96 +++++++++++++++----
 5 files changed, 326 insertions(+), 57 deletions(-)

diff --git a/src/Components/PatientForm/FamilyFormSection2.tsx b/src/Components/PatientForm/FamilyFormSection2.tsx
index f1ad09c..b73a92d 100644
--- a/src/Components/PatientForm/FamilyFormSection2.tsx
+++ b/src/Components/PatientForm/FamilyFormSection2.tsx
@@ -101,7 +101,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
             </Grid>
            
             <Grid item xs={4} className='collapsable-form-style '></Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                 <TextField 
                 
                 variant="outlined" 
@@ -119,7 +125,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+            className='collapsable-form-style '>
                 <TextField 
                 // required
                 variant="outlined" 
@@ -137,7 +149,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 />
                
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                  <TextField 
                  variant="outlined" 
                  label="Hours/Week" 
@@ -155,7 +173,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                  />
                  
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                 <TextField 
                 variant="outlined" 
                 label="Employer" 
@@ -171,7 +195,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                 <TextField 
                 variant="outlined" 
                 label="Business Phone" 
@@ -189,13 +219,24 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 />
             </Grid>
 
-            <Grid item xs={4} className='collapsable-form-style '></Grid>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '></Grid>
 
             <Grid item xs={12} className='collapsable-form-style '> 
                 <FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel>
             </Grid>
 
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12} className='collapsable-form-style '>
                  <TextField 
                  variant="outlined" 
                  label="Spouse's Name" 
@@ -211,7 +252,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                  />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                  <TextField 
                  variant="outlined" 
                  label="Spouse's Employer" 
@@ -227,7 +274,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                  />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                   <TextField 
                   variant="outlined" 
                   label="Business Phone" 
@@ -250,7 +303,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
             </Grid>
            
 
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                    <TextField 
                    variant="outlined" 
                    label="Emergency Contact" 
@@ -266,7 +325,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                    />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                     <TextField 
                     variant="outlined" 
                     label="Relationship" 
@@ -282,7 +347,12 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                     disabled={type=='display'}
                     />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12} className='collapsable-form-style '>
                      <TextField 
                      variant="outlined" 
                      type="number"
diff --git a/src/Components/PatientForm/MedicalHistorySection3.tsx b/src/Components/PatientForm/MedicalHistorySection3.tsx
index 3f7211d..4d3c81a 100644
--- a/src/Components/PatientForm/MedicalHistorySection3.tsx
+++ b/src/Components/PatientForm/MedicalHistorySection3.tsx
@@ -76,7 +76,13 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
         </Grid>
 
         <Grid container direction="row">
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="Family physician" 
@@ -91,7 +97,13 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 disabled={type=='display'}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="City" 
@@ -106,7 +118,13 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 disabled={type=='display'}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="State" 
@@ -121,7 +139,13 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 disabled={type=='display'}
                  />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="Phone" 
@@ -138,14 +162,30 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 />
             </Grid>
             
-            <Grid item xs={4} className='collapsable-form-style'></Grid>
-            <Grid item xs={4} className='collapsable-form-style'></Grid>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12} className='collapsable-form-style'></Grid>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12} className='collapsable-form-style'></Grid>
 
             <Grid item xs={12} className='collapsable-form-style '> 
                 <FormLabel sx={{fontWeight:600}}>Chiropractor Information:</FormLabel>
             </Grid>
 
-            <Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                 <FormLabel>Previous Chiropractic Care:</FormLabel>
                 <RadioGroup
@@ -166,7 +206,13 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 </FormControl>
             </Grid>
 
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="Chiropractor's Name" 
@@ -182,7 +228,13 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                  />
             </Grid>
 
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="City/State" 
diff --git a/src/Components/PatientForm/PastTreatment5.tsx b/src/Components/PatientForm/PastTreatment5.tsx
index 7ad90c8..d2dfb01 100644
--- a/src/Components/PatientForm/PastTreatment5.tsx
+++ b/src/Components/PatientForm/PastTreatment5.tsx
@@ -121,7 +121,12 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
           </Grid>
           
         
-          <Grid item xs={4} className='collapsable-form-style-form7'>
+          <Grid item 
+          xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 variant="outlined"
                 label="If yes, when?" 
@@ -135,7 +140,12 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                 }}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style-form7'>
+            <Grid item 
+            xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 variant="outlined"
                 label="Was treatment provided?If yes, by whom?" 
@@ -150,7 +160,12 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                 }}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style-form7'>
+            <Grid item 
+            xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 variant="outlined"
                 label="Outcome?" 
@@ -287,7 +302,11 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                 type={type}/>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-multiline'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-multiline'>
           <FormLabel>Please list current supplements or drugs you may be taking:</FormLabel>
                 <TextField 
                 multiline
diff --git a/src/Components/PatientForm/RecreationalHobbiesSection7.tsx b/src/Components/PatientForm/RecreationalHobbiesSection7.tsx
index 976471b..44a60e1 100644
--- a/src/Components/PatientForm/RecreationalHobbiesSection7.tsx
+++ b/src/Components/PatientForm/RecreationalHobbiesSection7.tsx
@@ -136,7 +136,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Do you excercise?</FormLabel>
                     <RadioGroup
@@ -156,7 +160,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.excercise!=='Yes'||type=='display'}
                 variant="outlined"
@@ -172,7 +180,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
             </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Use tobacco?</FormLabel>
                     <RadioGroup
@@ -192,7 +204,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.tobacco!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.tobaccoExplanation:patient.tobaccoExplanation}
@@ -208,7 +224,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
             </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Consume alcohol?</FormLabel>
                     <RadioGroup
@@ -228,7 +248,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.alcohol!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.alcoholExplanation:patient.alcoholExplanation}
@@ -244,7 +268,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
             </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Have a healthy diet?</FormLabel>
                     <RadioGroup
@@ -264,7 +292,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.healthyDiet!=='No'||type=='display'}
                 value={type=='display'?patientDataDiplay.healthyDietExplanation:patient.healthyDietExplanation}
@@ -280,7 +312,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Get adequate sleep?</FormLabel>
                     <RadioGroup
@@ -300,7 +336,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.sleep!=='No'||type=='display'}
                 value={type=='display'?patientDataDiplay.sleepExplanation:patient.sleepExplanation}
@@ -316,7 +356,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Is Work/School stressful to you?</FormLabel>
                     <RadioGroup
@@ -336,7 +380,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.workSchool!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.workSchool:patient.workSchool}
@@ -352,7 +400,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Family life stressful to you?</FormLabel>
                     <RadioGroup
@@ -372,7 +424,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.familyLife!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.familyLifeExplanation:patient.familyLifeExplanation}
@@ -388,7 +444,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Use recreational drugs?</FormLabel>
                     <RadioGroup
@@ -408,7 +468,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.drugs!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.drugsExplanation:patient.drugsExplanation}
diff --git a/src/Components/PatientForm/SyestemReviewSection6.tsx b/src/Components/PatientForm/SyestemReviewSection6.tsx
index aa46419..d2e71c3 100644
--- a/src/Components/PatientForm/SyestemReviewSection6.tsx
+++ b/src/Components/PatientForm/SyestemReviewSection6.tsx
@@ -93,7 +93,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
             <FormLabel sx={{fontWeight:600}}>Please choose body areas or systems where you may have problems:</FormLabel>
         </Grid>
         <Grid container direction="row">
-        <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+        <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Eyes</FormLabel>
                     <RadioGroup
@@ -112,7 +116,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Intestines/Bowls</FormLabel>
                     <RadioGroup
@@ -131,7 +139,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Joints/Bones</FormLabel>
                     <RadioGroup
@@ -150,7 +162,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Allergies</FormLabel>
                     <RadioGroup
@@ -169,7 +185,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Ears, Nose, Mouth, Throat</FormLabel>
                     <RadioGroup
@@ -188,7 +208,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Urinary</FormLabel>
                     <RadioGroup
@@ -207,7 +231,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Skin</FormLabel>
                     <RadioGroup
@@ -226,7 +254,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Psychological/Emotional</FormLabel>
                     <RadioGroup
@@ -245,7 +277,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Heart</FormLabel>
                     <RadioGroup
@@ -264,7 +300,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Muscles</FormLabel>
                     <RadioGroup
@@ -283,7 +323,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Internal Organs</FormLabel>
                     <RadioGroup
@@ -302,7 +346,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Gynecological menstrual/Brest</FormLabel>
                     <RadioGroup
@@ -322,7 +370,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
               </FormControl>
           </Grid>
 
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Lungs/Breathing</FormLabel>
                     <RadioGroup
@@ -341,7 +393,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Nerves</FormLabel>
                     <RadioGroup
@@ -360,7 +416,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Blood</FormLabel>
                     <RadioGroup
@@ -379,7 +439,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Prostate/Testicular/Penile</FormLabel>
                     <RadioGroup