Search code examples
htmlcssresponsive-designmobile-websiteresponsiveness

Width set to 100% seems to not working for me.Help me to make my website responsive

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)

Solution

  • 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;
}
}