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

[![enter image description here][1]][1]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 wont 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 >
        <a  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!


  [1]: https://i.stack.imgur.com/hWV2F.png

CodePudding user response：

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

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

CodePudding user response：

Check the order of your styles. The media queries have to come last or they get overwritten by your normal style.

.summitLogo{
    padding: 0px;
    margin: 0px;
}
.summitLogo{
    float:left;
    margin-left: 5px;
    margin-top: 3px;
    padding: 0px;
    z-index: 1;
    font-size: 35px;
}
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;
}
@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;
  }
}

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

Fiddle: https://jsfiddle.net/pwnybgu4/1/