Personal Portfolio cannot get two columns on mobile screens

Hello everyone. I am working on the “Personal Portfolio” project. I am basically trying to recreate the Portfolio page from freeCodeCamp. Everything was going fine until I started working on “Projects” section. It uses CSS grid, the author left comments saying the grid is “Automatic” that will not need media queries.

The problem is, I cannot get two columns on mobile screen like in original portfolio page, mine always shrinks to one column. After trying to get the same result on Mobile phone screen, I just copied the same CSS code but still, it is not working as it should be.


Here is the link to the freeCodeCamp Portfolio: https://personal-portfolio.freecodecamp.rocks/

And here is my CSS code:

<body>
        <nav>
            <ul id="nav-bar">
                <li class="nav-items" id="#">About</li>
                <li class="nav-items" id="#">Work</li>
                <li class="nav-items" id="#">Contact</li>
            </ul>
        </nav>
        <section id="section-intro">
                <h1 id="intro">Welcome</h1>
                <h1 id="intro1">I am Tilek Shopokov</h1>
                <p id="intro2">Full Stack Software Engineer</p>
        </section>
        <section id="section-works">
            <h1>My Projects</h1>
            <div id="container">
                <a href="" target="_blank" class="link">
                    <img src="./7moUTqS-1C4.jpg" class="image"/>
                    <p class="title">
                        <span class="span"><</span>
                        Tic Tac Toe Game
                        <span class="span">/></span>
                    </p>
                </a>
                <a href="" target="_blank" class="link">
                    <img src="./7moUTqS-1C4.jpg" class="image"/>
                    <p class="title">
                        <span class="span"><</span>
                        Wikipedia Viewer
                        <span class="span">/></span>
                    </p>
                </a>
                <a href="" target="_blank" class="link">
                    <img src="./7moUTqS-1C4.jpg" class="image"/>
                    <p class="title">
                        <span class="span"><</span>
                        Tribute Page
                        <span class="span">/></span>
                    </p>
                </a>
                <a href="" target="_blank" class="link">
                    <img src="./7moUTqS-1C4.jpg" class="image"/>
                    <p class="title">
                        <span class="span"><</span>
                        Random Quote Machine
                        <span class="span">/></span>
                    </p>
                </a>
                <a href="" target="_blank" class="link">
                    <img src="./7moUTqS-1C4.jpg" class="image"/>
                    <p class="title">
                        <span class="span"><</span>
                        Javascript Calculator
                        <span class="span">/></span>
                    </p>
                </a>
                <a href="" target="_blank" class="link">
                    <img src="./7moUTqS-1C4.jpg" class="image"/>
                    <p class="title">
                        <span class="span"><</span>
                        Map Data Across the Globe
                        <span class="span">/></span>
                    </p>
                </a>
                <a href="" id="showall-button" target="_blank">
                    <i class="show-button">
                    </i>
                </a>
            </div>
        </section>
        <footer></footer>
    </body>
</html>
* {
    margin: 0;
    padding: 0;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
:root {
    --header-color: rgb(38, 39, 39);
    --main-blue: #45567d;
}
html {
    min-width: 375px;
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-size: 62.5%;
}
body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    line-height: 1.4;
    color: white;
}
nav {
    width: 100%;
    height: 50px;
    background: linear-gradient(90deg, rgb(21, 96, 200),  rgb(182, 255, 255));
    position: fixed;
}
#nav-bar {
    list-style-type: none;
    width: 100%;
    text-align: right;
    height: 100%;
}
.nav-items {
    display: inline-block;
    margin: 10px 20px; 
    font-family: 'Holtwood One SC', serif;
    font-size: 16px;
    color: var(--header-color);
    opacity: 0.8;
}
/*--------------------------------------------*/
#section-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #000;
    background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
    text-align: center;
}

#intro {
    color: aliceblue;
    font-family: 'Orbitron', sans-serif;
    font-size: 32px;
    text-transform: uppercase;
}
#intro1 {
    color: aliceblue;
    font-size: 32px;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
}
#intro2 {
    color:brown;
    font-family: 'Alata', sans-serif;
    text-transform: uppercase;
}

/*----------------------------------------------*/

#section-works {
    text-align: center;
    padding: 10rem 2rem;
    background: var(--main-blue);
}
#section-works h1 {
    max-width: 640px;
    margin: 0 auto 6rem auto;
    text-transform: uppercase;
}
#container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-gap: 4rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 6rem;

}
.image {
    height: calc(100% - 6.8rem);
    object-fit: cover;
    width: 100%;
}
.link {
    background-color: #3a3d40;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    
}
.title {
    font-size: 2rem;
    padding: 2rem 0.5rem;
}
img {
    display: block;
    width: 100%;
}
a {
    text-decoration: none;
    color: white;
}
.span {
    color: #3a3d40;
}
/*---------------------------------------------*/
@media only screen and (max-width: 375px)  {
    #nav-bar {
        text-align: center;
    }
    .nav-items {
        font-size: 1rem;
        margin: 10px 20px;
    }
    #section-intro {
        padding: 0 30px;
    }
}
@media (max-width: 460px) {
    nav {
        justify-content: center;
    }
    #nav-bar {
      margin: 0 1rem;
    }
    #section-works h1 {
      font-size: 4rem;
    }
  }
@media only screen and (max-width: 490px) {
    #nav-bar {
        text-align: center;
    }
    .nav-items {
        font-size: 16px;
        margin: 10px 20px;
    }
    #section-intro {
        padding: 0 30px;
    }
    #section-works {
        padding: 6rem 1rem;
    }
    #container {
        grid-template-columns: 1fr;
    }
}
@media screen and (orientation: landscape)  {
    .nav-items {
        font-size: 16px;
        margin: 10px 20px;
    }
    #section-intro {
        padding: 0 30px;
    }
    
}

If you want to get something like this:

when the size of the screen is less than 490px, add in the media query with max-width property set to 490px the following CSS code:

#container {
    grid-template-columns: 1fr 1fr;
  }

Similarly, do it for all screen sizes.

Thanks for replying. I tried and it works just fine.
However, the author of the example “Personal Portfolio Webpage” from freeCodeCamp
was able to achieve this result without media queries as you can see in his CSS Code down below.

/* "Automagic" image grid using no media queries */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 4rem;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 6rem;
}

@media (max-width: 30.625em) {
  .projects-section {
    padding: 6rem 1rem;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }
}

.project {
  background: var(--main-gray);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 2px;
}

.code {
  color: var(--main-gray);
  transition: color 0.3s ease-out;
}

.project:hover .code {
  color: #ff7f50;
}

.project-image {
  height: calc(100% - 6.8rem);
  width: 100%;
  object-fit: cover;
}

.project-title {
  font-size: 2rem;
  padding: 2rem 0.5rem;
}

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 2px;
}

.btn-show-all {
  font-size: 2rem;
  background: var(--main-gray);
  transition: background 0.3s ease-out;
}

.btn-show-all:hover {
  background: var(--main-red);
}

.btn-show-all:hover > i {
  transform: translateX(2px);
}

.btn-show-all > i {
  margin-left: 10px;
  transform: translateX(0);
  transition: transform 0.3s ease-out;
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.