I am completely new to Front end development, and this is my very first client project where I could really use some assistance.
Could someone please guide me on how to ensure that everything on the website is responsive for mobile and tablet devices?
Below is a snippet of 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>
Here is the accompanying 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{
}
If anyone can provide any feedback on possible errors or point me towards resources to learn more about developing responsive websites, I would greatly appreciate it. I have tried watching numerous YouTube videos, but they haven't been as helpful as I had hoped.