I have a quick question, I am stuck in finding out what is the solution to make this site looks presentable and be able to view properly in mobile view. it is fine when you view it on the wide-screen monitor, but if you shrink down the size of the browser, there are parts of my sections getting messy. especially in mobile view, I need some advice on this, thank you so much.. here is my link

https://kaiixer099.github.io/sampleprojects/PersonalPortfolio/index.html

and here is my code for css in project section

/* project section */
#projects {
    background: linear-gradient(120deg, transparent , goldenrod);
}
#projects .projects{
    flex-direction: column;
    max-width: 1200px;
    margin: auto;
    padding: 100px 0;
}
#projects p{
    color: #000;
}
#projects .projects-header h1{
    margin-bottom: 5px;
}
#projects .all-projects{
    display: grid;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80vw;
    grid-template-columns: repeat(3, 35%);
}
#projects .project-item{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 90%;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 10px;
}
#projects .project-info{
    padding: 30px;
    flex-basis: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(to right, transparent, goldenrod);
}
#projects .project-info h1{
    font-size: 4rem;
    font-weight: 600;
}
#projects .project-info h2{
    font-size: 2rem;
    font-weight: 700;
    margin-top: 10px;
    letter-spacing: 10px;
    text-shadow: 0 0 10px black,
    0 0 20px black,
    0 0 40px gold,
    0 0 80px gold,
    0 0 100px black;
}
#projects .project-img{
    flex-basis: 50%;
    height: 500px;
    overflow: hidden;
    position: relative;
}
#projects .project-img img{
    object-fit: contain;
    transition: .3s ease transform;
}
#projects .project-img:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: .4;
}
#projects .project-item:hover .project-img img{
    transform: scale(1.1);
}
#projects .project-item:hover .project-img::after {
    opacity: 0;
}

/* project section end */

CodePudding user response：

Hence you can make this site responsive by using css. Explore this code.

@media only screen and (max-width:600px) {
    h1, .h01 {
        font-size: 2.6rem;
        letter-spacing: -.07rem;
    }
}

You can put the same codes again and again by changing the max-width and customizing it. This will help you to change the appearance of your website in several sizes.