diff --git a/package-lock.json b/package-lock.json
index cdffae4..7e25b8f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "start-server-and-test": "^2.0.0",
         "styled-components": "^5.3.6",
         "typescript": "^4.9.5",
+        "use-resize-observer": "^9.1.0",
         "web-vitals": "^2.1.4",
         "zustand": "^4.3.8"
       }
@@ -3254,6 +3255,11 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -17968,6 +17974,18 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-resize-observer": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",
+      "integrity": "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==",
+      "dependencies": {
+        "@juggle/resize-observer": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": "16.8.0 - 18",
+        "react-dom": "16.8.0 - 18"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@@ -21283,6 +21301,11 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+    },
     "@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -31760,6 +31783,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "use-resize-observer": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",
+      "integrity": "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==",
+      "requires": {
+        "@juggle/resize-observer": "^3.3.1"
+      }
+    },
     "use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
diff --git a/package.json b/package.json
index c0c44c6..d972390 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "start-server-and-test": "^2.0.0",
     "styled-components": "^5.3.6",
     "typescript": "^4.9.5",
+    "use-resize-observer": "^9.1.0",
     "web-vitals": "^2.1.4",
     "zustand": "^4.3.8"
   },
diff --git a/src/kit/section.tsx b/src/kit/section.tsx
index 7b526c7..3916bdf 100644
--- a/src/kit/section.tsx
+++ b/src/kit/section.tsx
@@ -2,6 +2,8 @@ import * as React from "react";
 import Box from "@mui/material/Box";
 import { SxProps, Theme, useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
+// import {createRef, useEffect} from "react";
+// import useResizeObserver from "use-resize-observer";
 
 interface Props {
   sxsect?: SxProps<Theme>;
@@ -11,14 +13,19 @@ interface Props {
   bg: string;
   children: React.ReactNode;
   sxcont?: SxProps<Theme>;
+  ref?: any
 }
 
+
 export default function Section(props: Props) {
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+    const isMinTablet = useMediaQuery(theme.breakpoints.down(886));
+    const isRubberSmall = useMediaQuery(theme.breakpoints.down(500));
 
   return (
     <Box
+        ref={props.ref}
       component={props.tag}
       backgroundColor={props.bg}
       sx={{
@@ -27,7 +34,7 @@ export default function Section(props: Props) {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-
+        // padding: isRubberSmall ? (height === 600 ? "0 0 10px 0" : "0 0 32px 0") : "136px 0 110px 0",
         ...props.sxsect,
       }}
     >
@@ -46,4 +53,4 @@ export default function Section(props: Props) {
       </Box>
     </Box>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/MobileApps/Section1/Section1.tsx b/src/pages/MobileApps/Section1/Section1.tsx
index e75f077..34e052b 100644
--- a/src/pages/MobileApps/Section1/Section1.tsx
+++ b/src/pages/MobileApps/Section1/Section1.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { createRef, useEffect} from "react";
 import { Box, Typography, Button, useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 
@@ -7,6 +7,7 @@ import Section from "../../../kit/section";
 import phoneImage from "../../../image/img_mobile/phone1.png";
 import phoneMobil from "../../../image/img_mobile/img_phone_bubbles_1.png";
 import { setIsContactFormOpen } from "../../../stores/contactForm";
+import useResizeObserver from "use-resize-observer";
 
 export default function Section1() {
   const theme = useTheme();
@@ -15,8 +16,13 @@ export default function Section1() {
   const isMinTablet = useMediaQuery(theme.breakpoints.down(886));
   const isRubberSmall = useMediaQuery(theme.breakpoints.down(500));
 
-  return (
+    const { ref, width, height } = useResizeObserver<HTMLDivElement>();
+    console.log(height)
+
+
+    return (
     <Section
+       ref={ref}
       tag="section"
       bg="#F2F3F7"
       mwidth="1200px"
@@ -79,7 +85,14 @@ export default function Section1() {
           Текст-заполнитель — это текст, который имеет некоторые характеристики
           реального письменного текста, но является
         </Typography>
-        <Box sx={{ position: "relative "}}>
+          {/*тут пример того как это работает, у этого бокса высота 84, если подставить её, то фон становится черным, */}
+          {/*если использовать <== всё сломается*/}
+        <Box 
+            //ref={ref}
+            sx={{
+                position: "relative",
+              //  backgroundColor: height === 70 ? "black" : "tomato"
+            }}>
           <Button
         onClick={() => setIsContactFormOpen(true)}
             disableRipple
diff --git a/yarn.lock b/yarn.lock
index d402d34..a49bba6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1680,6 +1680,11 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@juggle/resize-observer@^3.3.1":
+  "integrity" "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+  "resolved" "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz"
+  "version" "3.4.0"
+
 "@leichtgewicht/ip-codec@^2.0.1":
   "integrity" "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
   "resolved" "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz"
@@ -8494,7 +8499,7 @@
     "strip-ansi" "^6.0.1"
     "text-table" "^0.2.0"
 
-"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", "react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>= 16.8.0", "react-dom@>=16.6.0", "react-dom@>=16.8":
+"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", "react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>= 16.8.0", "react-dom@>=16.6.0", "react-dom@>=16.8", "react-dom@16.8.0 - 18":
   "integrity" "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   "version" "18.2.0"
@@ -8622,7 +8627,7 @@
     "loose-envify" "^1.4.0"
     "prop-types" "^15.6.2"
 
-"react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>= 16.8.0", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0":
+"react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>= 16.8.0", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0", "react@16.8.0 - 18":
   "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
   "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   "version" "18.2.0"
@@ -9997,6 +10002,13 @@
     "querystringify" "^2.1.1"
     "requires-port" "^1.0.0"
 
+"use-resize-observer@^9.1.0":
+  "integrity" "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow=="
+  "resolved" "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz"
+  "version" "9.1.0"
+  dependencies:
+    "@juggle/resize-observer" "^3.3.1"
+
 "use-sync-external-store@1.2.0":
   "integrity" "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA=="
   "resolved" "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"