How to link website to several media queries?

I want to style my HTML differently according to different media queries. For example, I want my HTML to display in a way when it is viewed on a browser with a width of 1024px or less, and in another way if it is viewed on a browser with a landscape orientation (like when a phone is flipped over). Here is what I tried doing;

@media (max-width: 1024px) {
	h1{
        margin-top: 10px;
    }
}

@media (orientation: landscape) {
	h1{
        margin-top: 20px;
    }
}

<html>
    <body>
           <h1>Hello world</h1>
    </body>
</html>

But unfortunately it didn't work. The problem was that when I loaded the site on a landscape device the code did not change.

Note: My problem is not that the media queries are completely not functioning. It is, however that I am being unable to use more than two media queries.

Thank you.

Solution

For a beginning, try to use this instead of what you have:

@media screen and (max-width: 1024px) {...