html - full screen responsive navbar, image and text

Question

I am very new to Front end dev, this is my first client project and i need some help with it please.

How can I make everything responsive to mobile and tablet devices please

Here's the code:

const Header = () => {
    return(
        <div className="cont fw9 f3 ">
            <div className=" topbar">
             <img className="top-logo grow" src={logo} alt="logo" />
                <Navbar  expand="sm" className="list ">
                     <Nav.Link  href="#home"> Home </Nav.Link>
                     <Nav.Link  href="#features">About Us</Nav.Link>
                     <Nav.Link  href="#pricing">Services</Nav.Link>
                     <Nav.Link  href="#tt">Our Team</Nav.Link>
                     <Nav.Link  href="#tt">Sustainability</Nav.Link>
                     <Nav.Link  href="#rr">Become an investor</Nav.Link>
                     <Nav.Link  href="#dd">Contact</Nav.Link>                  
                </Navbar> 
            </div>
              <div className=" header-main" >
                <p className="header-title b dark-blue"> INTEGRATED COLD CHAIN</p>
                <p className="header-sec f5  i black b "> Ifria is an Integrated Cold Chain Company in North and West African markets. Ifria’s mission is to develop new, modern and efficient perishable product storage capacities that can more efficiently serve the growing and rapidly changing needs of the Panafrican markets. </p>
              </div>
        </div>

this is the css:

.cont {
  animation: animate 15s  infinite;
  height: 800px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@keyframes animate{
  0%,100%{
    background-image: url(../Images/bg.png);
  }
  25%{
    background-image: url(../Images/bg2.png);
  }
  50%{
    background-image: url(../Images/bg3.png);
  }
}

.topbar{
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  align-content: flex-start;
  height: 130px;

}

.list{
  height: 100px;
  justify-content: flex-end;
}

.top-logo{
  display: flex;
  position: absolute;
  top:50px;
  left: 90px;
}

 .nav-link{
    font-family: 'Roboto';
    font-size: 18px;
    color: black !important;
  }
  .nav-link:hover {
  transform: scale(1.1); 

}

.header-main{
  position: absolute;
  right: 0px;
  height: 300px;
  width: 700px;
  top: 300px;
  flex-direction: column;
}

.header-title{
    font-size: 45px;
}

.header-sec{

}

can anyone tell me what im doing wrong or just point me to the right article to read more about responsive website. I tried watching a lot of yt vids but didnt really help

question from:https://stackoverflow.com/questions/65919909/full-screen-responsive-navbar-image-and-text

Answer 1

just use bootstrap. you will get a lot of responsive things there.

https://getbootstrap.com/docs/4.0/getting-started/introduction/