Not Responsive

[GleanCoder]

hello @zahoorshinwari your website is responsive , it start overflow after 786px , can you assign me this I want to fix it?

[zahoorshinwari]

Ok Change it.

[Yogesh-160]

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){

menu-icon{

    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.

[GleanCoder]

@Yogesh-160 Ok I will you Inform you after checking the code.

[zahoorshinwari]

okay .