I’m learning how to use "@media"on my website, but my logo in the top isn't becoming smaller

Question

So it is my first time using media queries in CSS and I'm messing around with sizes for different screens.

I wanted to make my logo in the .logo div (class) and I can't seem to figure out why it won't make the logo smaller for smaller screens.

I'm using chrome dev tools to shrink the screen, but the logo is the only element that doesn't work.

Heres some of my HTML:

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="stylesheets/screenstyles.css">

And also, more HTML:

<div class="logo">
        <a class="summitLogo" href="index.html"><hs>S</hs><hu>u</hu><hm>mm</hm><hi>i</hi><ht>t</ht></a> 
    </div>

And then, here is some CSS: (from the files stylesheets/screenstyles.css)

@media screen and (max-width: 800px) {
  .summitLogo{
    font-size:20px;
    float:left;
    margin-left: 5px;
    margin-top: 3px;
    padding: 0px;
    z-index: 1;
  }
}
@media screen and (max-width: 600px) {
  .summitLogo {
    font-size: 15px;
  }
}

This is some CSS code from my main style sheet:

.summitLogo{
    padding: 0px;
    margin: 0px;
}
.summitLogo{
    float:left;
    margin-left: 5px;
    margin-top: 3px;
    padding: 0px;
    z-index: 1;
    font-size: 35px;
}

Oh, here is some more css lol

hs{
    color: #F73802;
    text-decoration: none; 
    font-family: 'Rowdies', cursive;
}

hu{
    color: #F6B335;
    text-decoration: none; 
    font-family: 'Rowdies', cursive;
}

hm{
    color: #B0FCFF;
    text-decoration: none; 
    font-family: 'Rowdies', cursive;
}...
/* That code is for all the tags starting with h_*/
}```
Thanks!

Answer 1

1. Reason One - Specificity: Put your media queries at the end of the code or add the !important to each property in @media.

@media screen and (max-width: 600px) {
  .summitLogo {
    font-size: 15px !important;
  }
}

2. Reason Two - problem with inline display: a tag by default use inline display. Therefore, there is no way to use margin/padding/width/height (actually you can use left/right for some of them). When you want to manipulate the size of your elements, you should use the inline-block display.

a {
  display: inline-block;
}