CODEWITHSUNDEEP
htmlcssmedia-queries
Adrian
Adrian

Reputation: 73

Media query not applied when needed

probably this question is stupid as heck, even tho I have spent almost an hour on stackoverflow looking through past questions and another hour on google to see if I can find my solution yet I've miserably failed.

The problem is that my "media queries" aren't working at all.

Here's my codepen version : https://codepen.io/anon/pen/WaXpda

Here's stackoverflow version: 

.header-menu-toggle {
    position: fixed;
    left: 12px;
    top: 12px;
    width: 48px;
    height: 45px;
    line-height: 45px;
    font-family: 'Exo', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.4rem;
    color: black;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.header-menu-toggle::after {
    display: inline-block;
    content: "Menu";
    height: 45px;
    left: 35px;
    text-align: right;
    padding-left: 15px;
    padding-right: 10px;
    position: absolute;
    top: 0;
    right: 100%;
}

.header-menu-toggle:hover, .header-menu-toggle:focus {
    color: #CC147C;
}

.header-menu-icon {
    display: block;
    width: 26px;
    height: 2px;
    margin-top: -1px;
    right: auto;
    bottom: auto;
    background-color: black;
    position: absolute;
    left: 11px;
    top: 50%;
}

.header-menu-icon::before, .header-menu-icon::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: inherit;
    position: absolute;
    left: 0;
}

.header-menu-icon::before {
    top: -9px;
}

.header-menu-icon::after {
    bottom: -9px;
}
@media screen and(max-width:768px){
  .header-menu-toggle{
    left:300px; /*middle, just for testing*/
  }
}
<div id="firstPage" class="firstPage">
            <a onclick="openNav()" class="header-menu-toggle" href="#0">
                <span class="header-menu-icon"></span>
            </a>
        
 </div>

The problem is that, when the screen width is below 768px, it should move the menu text into the middle. Yet, it's not happening, I've tried resetting the colours, and they are working fine. Just positioning isn't.

Thank you so much for your time spent answering this question, even for reading it.

Upvotes: 0

Views: 45

Answers (1)

Stender
Stender

Reputation: 2492

Syntax error.

You are missing a space in your query

.header-menu-toggle {
    position: fixed;
    left: 12px;
    top: 12px;
    width: 48px;
    height: 45px;
    line-height: 45px;
    font-family: 'Exo', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.4rem;
    color: black;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.header-menu-toggle::after {
    display: inline-block;
    content: "Menu";
    height: 45px;
    left: 35px;
    text-align: right;
    padding-left: 15px;
    padding-right: 10px;
    position: absolute;
    top: 0;
    right: 100%;
}

.header-menu-toggle:hover, .header-menu-toggle:focus {
    color: #CC147C;
}

.header-menu-icon {
    display: block;
    width: 26px;
    height: 2px;
    margin-top: -1px;
    right: auto;
    bottom: auto;
    background-color: black;
    position: absolute;
    left: 11px;
    top: 50%;
}

.header-menu-icon::before, .header-menu-icon::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: inherit;
    position: absolute;
    left: 0;
}

.header-menu-icon::before {
    top: -9px;
}

.header-menu-icon::after {
    bottom: -9px;
}
@media all and (max-width:768px){
  .header-menu-toggle{
    left:300px; /*middle, just for testing*/
  }
}
<div id="firstPage" class="firstPage">
            <a onclick="openNav()" class="header-menu-toggle" href="#0">
                <span class="header-menu-icon"></span>
            </a>
        
 </div>

PS. Sorry about the 2 hours wasted :(

Upvotes: 1

Related Questions