diff --git a/src/features/StreetcodePage/HeadingBlock/BlockHeading.component.tsx b/src/features/StreetcodePage/HeadingBlock/BlockHeading.component.tsx
index d9647a6bf..76480b07f 100644
--- a/src/features/StreetcodePage/HeadingBlock/BlockHeading.component.tsx
+++ b/src/features/StreetcodePage/HeadingBlock/BlockHeading.component.tsx
@@ -5,16 +5,32 @@ import RhombusMobile from '@images/utils/rhombus_mobile.svg';
 
 import { useMediaQuery } from 'react-responsive';
 import { WindowsFilled } from '@ant-design/icons';
+import { useEffect, useRef } from 'react';
 
 interface Props {
     headingText: string;
 }
 
 const BlockHeading = ({ headingText }: Props) => {
+    const elementRef = useRef<HTMLHeadingElement | null>(null);
+
     const isMobile = useMediaQuery({
-        query: '(max-width: 768px)',
+        query: '(max-width: 1024px)',
     });
 
+    useEffect(() => {
+        const element = elementRef.current;
+        if (element) {
+            setTimeout(() => {
+                while (element.offsetHeight > 80 && isMobile){
+                    let fontSize = parseFloat(window.getComputedStyle(element).fontSize);
+                    element.style.fontSize = `${fontSize-2}px`;
+                }
+            }, 1000);
+        }
+    }
+    , []);
+
     return (
         <div className="blockHeadingWrapper">
             <div className="blockHeadingContainer">
@@ -23,12 +39,12 @@ const BlockHeading = ({ headingText }: Props) => {
                         && <Rhombus />}
                     {isMobile && <RhombusMobile />}
                 </div>
-                <h1 className={`blockHeadingText 
-                    ${headingText.length >= 30
-                        && window.screen.width < 640 ? 'bigTextComponent' : ''} `}
-                >
-                    {headingText}
-                </h1>
+                <div className="blockHeadingTextContainer">
+                    <h1 ref={elementRef}
+                        className="blockHeadingText">
+                        {headingText}
+                    </h1>
+                </div>
             </div>
         </div>
     );
diff --git a/src/features/StreetcodePage/HeadingBlock/BlockHeading.styles.scss b/src/features/StreetcodePage/HeadingBlock/BlockHeading.styles.scss
index e6ead3f5f..6d64919dc 100644
--- a/src/features/StreetcodePage/HeadingBlock/BlockHeading.styles.scss
+++ b/src/features/StreetcodePage/HeadingBlock/BlockHeading.styles.scss
@@ -4,58 +4,63 @@
 
 .blockHeadingWrapper {
     @include mut.sized(100%, 124px);
-    @include mut.flex-centered();
-    margin-top: f.pxToRem(110px);
-    margin-bottom: f.pxToRem(26px);
-
-    svg {
-        z-index: 0;
-        margin-left: f.pxToRem(-62px);
-    }
+    @include mut.rem-margined($top: 110px, $right: 0, $bottom: 26px, $left: 0);
+    @include mut.flexed($justify-content: center);
 }
 
 .blockHeadingContainer {
-    width: f.pxToRem(1200px);
     @include mut.flexed($justify-content: flex-start);
+    max-width: f.pxToRem(1200px);
+    width: 100%;
+    position: relative;
+}
+
+.rhombus{
+    height: 100%;
+    z-index: 0;
+    position: absolute;
+    left: -62px;
+    .svg{
+        height: 100%;
+        width: 100%;
+    }
+}
+
+.blockHeadingTextContainer{
+    position: absolute;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    @include mut.with-font(ft.$closer-text-font, $font-weight: 500, $font-size: 40px);
 }
 
 .blockHeadingText {
-    @include mut.positioned-as(relative, $left: -62px, $top: 41px);
     @include mut.with-font(ft.$closer-text-font, $font-weight: 500, $font-size: 40px);
-    padding-right: 10px;
 }
 
 .blockHeadingText::first-letter {
     text-transform: uppercase;
 }
-.rhombus{
-    height: 124px;
-}
 
 @media (max-width: 1350px) {
-    .blockHeadingWrapper{
-        margin-left: f.pxToRem(28px);
+    .rhombus{
+        left: -36px;
+    }
+    .blockHeadingTextContainer{
+        @include mut.rem-padded($right: 10px, $left: 10px);
     }
 }
 
 @media (max-width: 1024px) {
-    .blockHeadingWrapper{
-        margin-left: f.pxToRem(40px);
+    .blockHeadingWrapper {
         @include mut.sized(100%, 110px);
-        margin-top: f.pxToRem(40px);
-        margin-bottom: f.pxToRem(20px);
-    }
-    .rhombus{
-        height: 110px;
+        @include mut.rem-margined($top: 40px, $right: 0, $bottom: 20px, $left: 0);
+        @include mut.flexed($justify-content: center);
     }
 }
 
 @media (max-width: 768px) {
-    .blockHeadingWrapper{
-        margin-left: f.pxToRem(45px);
-    }
     .blockHeadingText {
         @include mut.with-font(ft.$closer-text-font, $font-weight: 500, $font-size: 32px);
-        @include mut.positioned-as(relative, $left: -81px, $top: 35px);
     }
 }
diff --git a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss
index 9f6a86975..6c5924fb9 100644
--- a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss
+++ b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss
@@ -66,6 +66,7 @@
   @include mut.rem-margined(13px, 0, 13px, 0);
 }
 .teaserBlock {
+  padding-bottom: f.pxToRem(20px);
   @include mut.with-font($font-weight: 300, $font-size: 20px);
   @include mut.rem-margined(25px, 0px, 0px, 0px);
   line-height: 23px;