How to customize CSS depending on (tinier) window size? - css

Question

So I've seen that there is a different css called depending on how large the screen is.
Example normal size:
Note the red bar does not have any margin-bottom and the text is custom css
(provided in an extra css file, not bootstrap.css)
Example tiny size:
Note that the css I have added is basically gone.
How can I fix this?
I thought it was something with
#media (max-width: 767px)
But after adding this in the extra css file it doesn't get fixed.
This is the CSS I used:
#The red bar
.top .alert {
margin-bottom: 0px;
}
#The text css
.very-big {
color: #20F587;
font-size: 115px;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
font-weight: bold;
}
.title-very-big {
color: #20F587;
font-size: 75px;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
font-weight: bold;
}
.p-very-big {
color: #20F587;
font-size: 15px;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
font-weight: bold;
}

Answer 1

a url to inspect it would be helpful.
that said:
anything in #media (max-width: 767px) will not appear in the bigger version.
max-width styles won't appear on screens bigger than the setting (in your case 767px), and min-width styles won't appear until the screen is at least as big as the setting. so if the desired margin and text styles are only working at a large size, chances are it is because they are in a min-width query somewhere, not a max-width.
sidenote: if possible, it is better (and makes things so much easier) to remove unwanted styles instead of trying to override styles.
edit:
i found your site at http://mrblackdragonfly.com/404/
the .top .alert has a margin-bottom:0px;, but it is inside a (min-width: 768px) query. move it out of there and the margin problem should go away.
the same goes for your text style.