Hi all,

 

Can anyone tell me why my some media query declaration are not being called?

 

I know media queries should be placed at the bottom of a stylesheet, but they only seem to work when I place them at the top and in some cases the original declarations are called.

 

Here is a media query I set:

@media(max-width: 640px) {
	.copyrightwrapper {
		position: relative;  top: 0; bottom: 0;
		float: left;
		width: 100%;  height: 30px;
		margin: 20px 0 0 0;  padding: 5px 0px 25px 0px;
		font-family: Arial, Helvetica, sans-serif;  font-weight: bold;  color: #999;
		border-top: solid 1px #ccc;
	}
}

Here is what's called even though my browser width is below 640px width:

.copyrightwrapper {
	position: relative;
	top: 30px;
	bottom: 0px;
 	float: left;
	width: 904px;
	color: #999;
	padding: 5px 0px 25px 0px;
	margin: 20px 15px 0 15px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	border-top: solid 1px #ccc;
} 

Here's the page I'm using the CSS on.

Edited September 23, 20178 yr by Demonolith

 

If you have two lines of css that are similar, the last one is the one that will take effect.

 

In that case, would I need to move the media queries below what is mistakenly being called?

 

When I do nothing is called.

 

 

Does that make sense?

 

Got it, thanks.

 

I also had a typo in my CSS that was preventing the media queries from being read when placed at the bottom.