I,m making a portfolio website for myself as my first project. It looks great on a desktop. But when I open it on mobile it's not responsive. I have tried the width set to 100% But on mobile, I have minimized it to adjust it for the screen, and then it's okay. I want to solve this problem, any help would be appreciated. Here is the website(https://portfoliofirst-website--tammanaaps.repl.co) and here is the code (https://replit.com/@tammanaaps/portfoliofirst-website)

CodePudding user response：

because you use a container size (960 px) try to give it the full size of the body (100 %).

.container {
  width: 960px;
  margin: 0 auto;
}

CodePudding user response：

Yep, the container is fix-sized, that's not very responsive. By the way you can benefit from using CSS grid both for the container and for different sections on mobile screens together with media queries

For instance:

@media screen and (max-width: 768px) {
  .header-text-box {
    grid-column: 1;
    grid-row: 1;
}

img {
    grid-column: 1;
    grid-row: 2;
}
}