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