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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…