[Solved] Need Help Please: I can only change background color with Media Query?

HTML-CSS
1

Hello all. Could I get some help with this?

I’m trying to remove padding and reduce font-size but my media query does not respond. It works for background color though? Very strange.

Also my codepen name is: Westcoaster (I have the project posted there too)

HTML / SCSS / CSS

/* HTML */
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet"
        href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
    <title>Portfolio</title>
</head>

<body>
    <div class="main-container">
        <div class="top-menu">
            <div class="logo">
                DS
            </div>
            <ul>
                <li><a href="#">Skills</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
        <section id="intro-section">
            <div class="intro-container">
                <div class="left-col">
                    <h1>Portfolio Name</h1>
                    <h3>Frontend Developer</h3>
                    
                </div>
                <div class="right-col">

                </div>
            </div>
        </section>
        <section id="skills-section">
            <div class="skills-container">
                <div class="skills-wrapper">
                    <div class="skills-box1">
                        <i class="devicon-html5-plain-wordmark skillcon"></i>
                    </div>
                    <div class="skills-box2">
                        <i class="devicon-css3-plain-wordmark skillcon"></i>
                    </div>
                    <div class="skills-box3">
                        <i class="devicon-javascript-plain skillcon"></i>
                    </div>
                    <div class="skills-box4">
                        <i class="devicon-git-plain-wordmark skillcon"></i>
                    </div>
                    <div class="skills-box5">
                            <i class="devicon-python-plain-wordmark skillcon"></i>
                    </div>
                </div>
            </div>
        </section>
        <section id="portfolio-section">
                <div class="portfolio-container">
                    <div class="portfolio-1 p-block">
                        Test 1
                    </div>
                    <div class="portfolio-2 p-block">
                        Test 2
                    </div>
                    <div class="portfolio-3 p-block">
                        Test 3
                    </div>
                    <div class="portfolio-3 p-block">
                        Test 4
                    </div>
                </div>
            </section>

    </div>

    <script src="assets/js/script.js"></script>
</body>

</html>

/* SASS  */
/* GLOBAL */
* {
    box-sizing: border-box;
}

/* VARIABLES */





/* MEDIA QUERIES */
$desktop-size: "only screen and (min-width : 960px)";
$mid-size: "only screen and (max-width : 960px)";
$mobile-size: "only screen and (max-width : 600px)";

@media #{$desktop-size} {
    .main-container {
        width: 960px;
    }
}

@media #{$mid-size} {
    .main-container {
        width: 600px;
    }

}

@media #{$mobile-size} {
    .main-container {
        background-color: black;
    }

    .top-menu ul li {
        font-size: 4px;
    }
}

/* MAIN */

.main-container {
    width: 70%;
    margin: 0 auto;

    .top-menu {
        width: 100%;
        height: 90px;
        background-color: gray;
        padding: 33px 32px 0 48px;

        .logo {
            color: red;
            float: left;
            font-size: 24px;
            vertical-align: middle;
        }

        ul {
            float: right;
            li {
                display: inline-block;
                list-style: none;
                margin-left: 64px;
                font-size: 24px;
                vertical-align: middle;

                a {
                    text-decoration: none;
                }
            }
        }
    }

    .intro-container {
        width: 100%;

        .left-col {
            float: left;
            padding: 380px 48px 48px 48px;
            width: 50%;
            height: 850px;
            background-color: green;

            h1 {
                font-size: 48px;
                margin-bottom: 14px;
                vertical-align: middle;
            }

            h3 {
                font-size: 24px;
            }
        }

        .right-col {
            float: right;
            width: 50%;
            height: 850px;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-image: url('/assets/images/hero_scene.jpg');
        }
    }

    .skills-container {
        width: 100%;
        height: 970px;
        overflow:hidden;
        padding-top: 232px;
        background-color: gray;

        .skills-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-auto-rows:minmax(300px, auto);
            justify-items: center;

            .skills-box1 {
                i {
                    font-size: 200px;
                    transition: .2s ease-in-out;
                    padding-bottom: 16px;

                    &:hover {
                        color: red;
                        border-bottom: 2px solid red;
                    }
                }

            }
            .skills-box2 {
                i {
                    font-size: 200px;
                    transition: .2s ease-in-out;
                    padding-bottom: 16px;

                    &:hover {
                        color: blue;
                        border-bottom: 2px solid blue;
                    }
                }
            }
                
            .skills-box3 {
                i {
                    font-size: 200px;
                    transition: .2s ease-in-out;
                    padding-bottom: 16px;

                    &:hover {
                        color: #c0ce29;
                        border-bottom: 2px solid #c0ce29;
                    }
                }
            }

            .skills-box4 {
                i {
                    font-size: 200px;
                    transition: .2s ease-in-out;
                    padding-bottom: 16px;

                    &:hover {
                        color: orange;
                        border-bottom: 2px solid orange;
                    }
                }
            }

            .skills-box5 {
                i {
                    font-size: 200px;
                    transition: .2s ease-in-out;
                    padding-bottom: 16px;

                    &:hover {
                        color: purple;
                        border-bottom: 2px solid purple;
                    }
                }
            }
        }
    }

    .portfolio-container {
        width: 100%;
        height: 970px;
        background-color: #303030;
        text-align: center;
        padding: 160px 48px 48px 48px;

        .p-block {
            margin: 16px;
            display: inline-block;
            width: 30%;
            height: 300px;
            border: 2px solid black;
            background-color: white;
        }
    }
}

/* PLAIN * CSS */
/* GLOBAL */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* VARIABLES */
/* MEDIA QUERIES */
@media only screen and (min-width: 960px) {
  .main-container {
    width: 960px;
  }
}

@media only screen and (max-width: 960px) {
  .main-container {
    width: 600px;
  }
}

@media only screen and (max-width: 600px) {
  .main-container {
    background-color: black;
  }
  .top-menu ul li {
    font-size: 4px;
  }
}

/* MAIN */
.main-container {
  width: 70%;
  margin: 0 auto;
}

.main-container .top-menu {
  width: 100%;
  height: 90px;
  background-color: gray;
  padding: 33px 32px 0 48px;
}

.main-container .top-menu .logo {
  color: red;
  float: left;
  font-size: 24px;
  vertical-align: middle;
}

.main-container .top-menu ul {
  float: right;
}

.main-container .top-menu ul li {
  display: inline-block;
  list-style: none;
  margin-left: 64px;
  font-size: 24px;
  vertical-align: middle;
}

.main-container .top-menu ul li a {
  text-decoration: none;
}

.main-container .intro-container {
  width: 100%;
}

.main-container .intro-container .left-col {
  float: left;
  padding: 380px 48px 48px 48px;
  width: 50%;
  height: 850px;
  background-color: green;
}

.main-container .intro-container .left-col h1 {
  font-size: 48px;
  margin-bottom: 14px;
  vertical-align: middle;
}

.main-container .intro-container .left-col h3 {
  font-size: 24px;
}

.main-container .intro-container .right-col {
  float: right;
  width: 50%;
  height: 850px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-image: url("/assets/images/hero_scene.jpg");
}

.main-container .skills-container {
  width: 100%;
  height: 970px;
  overflow: hidden;
  padding-top: 232px;
  background-color: gray;
}

.main-container .skills-container .skills-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(300px, auto);
  justify-items: center;
}

.main-container .skills-container .skills-wrapper .skills-box1 i {
  font-size: 200px;
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  padding-bottom: 16px;
}

.main-container .skills-container .skills-wrapper .skills-box1 i:hover {
  color: red;
  border-bottom: 2px solid red;
}

.main-container .skills-container .skills-wrapper .skills-box2 i {
  font-size: 200px;
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  padding-bottom: 16px;
}

.main-container .skills-container .skills-wrapper .skills-box2 i:hover {
  color: blue;
  border-bottom: 2px solid blue;
}

.main-container .skills-container .skills-wrapper .skills-box3 i {
  font-size: 200px;
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  padding-bottom: 16px;
}

.main-container .skills-container .skills-wrapper .skills-box3 i:hover {
  color: #c0ce29;
  border-bottom: 2px solid #c0ce29;
}

.main-container .skills-container .skills-wrapper .skills-box4 i {
  font-size: 200px;
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  padding-bottom: 16px;
}

.main-container .skills-container .skills-wrapper .skills-box4 i:hover {
  color: orange;
  border-bottom: 2px solid orange;
}

.main-container .skills-container .skills-wrapper .skills-box5 i {
  font-size: 200px;
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  padding-bottom: 16px;
}

.main-container .skills-container .skills-wrapper .skills-box5 i:hover {
  color: purple;
  border-bottom: 2px solid purple;
}

.main-container .portfolio-container {
  width: 100%;
  height: 970px;
  background-color: #303030;
  text-align: center;
  padding: 160px 48px 48px 48px;
}

.main-container .portfolio-container .p-block {
  margin: 16px;
  display: inline-block;
  width: 30%;
  height: 300px;
  border: 2px solid black;
  background-color: white;
}
/*# sourceMappingURL=main.css.map */
2 
.top-menu ul li {
    font-size: 4px;
  }

Is it for the above part in particular?

3

I nested that in .main-container and it didn’t work. I tried placing it out of that scope and still doesn’t work. Yet background-color: black does change when the browser hits 600px. Don’t understand why nothing else works.

Note: Have to step out for a break. Massive headache.

4

Sorry @westcoaster, why don’t you post the link here. Have you tried using dev tools to debug?

5

EDIT: Nevermind I solved the issue.

1 Like