React page width optimization

Issue

I'm trying to make a website with React. I tried pure css and then decided to use react-bootstrap. Both ways didnt solve my problem. I have overflow towards right side of my page and if I use overflow-x:hidden, my page goes half cut on mobile vision. So its not responsive at all (I am using bootstrap containers on all pages to make it responsive).

Overflowing Pic

Mobile Vision

Main Page and css :

   <Container fluid className="main-wrapper">
      <Row className='HeaderText'>
              /OPEN METAVERSE  
      </Row>
    </Container>
  )
}

CSS

@font-face{
    font-family:Adam;
    src:url("../fonts/Adam-Medium.ttf");
}

.main-wrapper{
    background-image:url("../pictures/MainPagePicTemp.png");
    background-repeat: no-repeat;
    background-size: cover;
    display:flex;
    height:920px;
}

.HeaderText{
    color:red;
    font-family:Adam;
    font-weight: Medium;
    font-size:96px;
    margin-left:35px;
    margin-top:60px;
}

Solution

Based on the mobile screenshot attached the cause of the overflow is the text size. the desktop image is not clear though.

Suggestions

1. Try using the clamp selector to generate a responsive font size across devices. See Reference and example below

   .HeaderText {
    font-size:clamp(2rem, 10vw - 2rem, 96px)
    }
   

2. You can cause the text to overflow to the next line using the word-break selector. See Reference

Answered By - Anurella