respnsive pages

components/searchHead/SmSearch.js

@@ -5,7 +5,9 @@ function SmSearch({ placeholder }) {
     return (
         <ButtonGroup
             variant="contained"
-            className="!bg-[#FFF] !w-2/3 !mt-[15px] !rounded-lg !overflow-hidden flex items-center !h-[64px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
+            className="!bg-[#FFF] !w-full lg:!w-2/3 !mt-[15px] !rounded-lg !overflow-hidden 
+            flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+            !h-fit !p-1"
         >
             <TextField
                 variant="standard"
@@ -13,14 +15,13 @@ function SmSearch({ placeholder }) {
                     disableUnderline: true
                 }}
                 sx={{
-                    '& .MuiInputBase-root': {
-                        height: '100%'
-                    },
-                    '& .MuiInput-root': {
-                        borderBottom: 'none',
-                    },
+                    background: 'transparent !important',
+                    '& .MuiInputBase-root': { height: '100%' },
+                    '& .MuiInput-root': { borderBottom: 'none', },
                     '& .MuiInputBase-input': {
-                        color: '#7E7E7E'
+                        background: 'transparent',
+                        color: '#7E7E7E',
+                        padding: '0'
                     }
                 }}
                 placeholder={placeholder}
@@ -28,7 +29,11 @@ function SmSearch({ placeholder }) {
                 className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
             />
             <Button
-                className="!rounded-[4px] !ml-1 !w-[56px] !h-[56px] !gap-2.5 !p-4"
+                className="
+                    !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4
+                    !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
+                    !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
+                "
             >
                 <SearchD />
             </Button>