Open GleanCoder opened 11 months ago
Ok Change it.
Use this CSS property :
@media only screen and (max-width: 600px) { body { } }
Or check out my portfolio which is responsive on both mobile as well as in laptop screens. I used this code to make it responsive
@media(max-width: 768px){
display: block;
}
.navbar{
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 1rem 3%;
background:var(--bg-color);
border-top: .1rem solid rgba(0,0,0,.2);
box-shadow: 0 .5rem 1rem rgba(0,0,0,.2);
display: none;
}
.navbar.active{
display: block;
}
.navbar a{
display: block;
font-size: 2rem ;
margin: 3rem 0;
}
.home{
flex-direction: column;
}
.home-content h3{
font-size: 2.6rem;
}
.home-content h1{
font-size: 5rem;
}
.home-img img{
width: 70vw;
margin-top: 4rem;
}
.about {
flex-direction: column-reverse;
}
.about-img{
width: 35vw;
margin-top: 4rem;
margin-left: 50px;
}
.portfolio h2{
margin-bottom: 3rem;
}
.portfolio-container{
grid-template-columns: repeat(2,1fr);
}
.certificates h2{
margin-bottom: 3rem;
}
.certificates-container{
grid-template-columns: repeat(2,1fr);
}
} @media (max-width: 617px){
.portfolio-container{
grid-template-columns: 1fr;
}
.certificates-container{
grid-template-columns: 1fr;
}
}
Click this link to check out my Portfolio #1: https://github.com/Yogesh-160/Portfolio_Yogesh_Jha/tree/main
Portfolio #2: https://github.com/Yogesh-160/Portfolio
Give ⭐️ if my code is helpful for you.
@Yogesh-160 Ok I will you Inform you after checking the code.
okay .
hello @zahoorshinwari your website is responsive , it start overflow after 786px , can you assign me this I want to fix it?