Styles Not Being Applied

Hey,

I’m trying to modify the #skills section in the: min-width: 960px media query, but my styles aren’t being applied. Anyone know what’s causing this? Thanks!

.skills {

That should be an id, not a class, right?

Yeah, I added that class to see if that would change anything. Forgot to change it back in the media query. Besides that, still not sure what the issue is.

I would double check this area here


  
    body {
      font-size: 18px;
    }

    .grid {
      width: 100%;
      max-width: 1060px;
      margin: 0 auto;
    }

    .projects {
      & a img, 
      & a h4 {
        justify-self: center;
      }
    
    .skills {
      max-width: 1060px;
      margin-inline: auto;
      border: 1px solid red;
    }

}

Are you referring to the .skills? I changed that a while ago, so it’s been showing #skills on my end. I have auto-save on on codepen but it isn’t working for some reason.

I couldn’t get it to work with #skills so I tried adding a class and using that in the off chance that that might do something. So, I’m still having the same issue either way. Any ideas? Thanks

You dont have enough closing braces here. Look carefully


/* large tablets and laptop styles */
@media screen and (min-width: 960px) {
  
    body {
      font-size: 18px;
    }

    .grid {
      width: 100%;
      max-width: 1060px;
      margin: 0 auto;
    }

    .projects {
      & a img, 
      & a h4 {
        justify-self: center;
      }
    
    #skills {
      max-width: 1060px;
      margin-inline: auto;
      border: 1px solid red;
    } 

}

1 Like

Can’t believe I missed that🤦‍♂️. Thanks

2 Likes

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