HTML/CSS Responsive text

Question

I'm working on my first responsive website. I've read about it and have a decent understanding on it. One of the problems I ran into is with text or h1-6 headers. For example, I have a button that I want to resize as I resize my browser. The button is under a class. Also in that css file I have a @media only screen and (min-width : 320px) { ... Inside the bracket I called the same class and for the width I put max-width: 50%. This works perfect. The problem I'm having is if I use element again it replaces it for the whole page even if I'm viewing it at full screen.

What I'm trying to say is for example I have a class called "keep-button" inside the css I have it as font-size:25px. Now when I go to the @media only screen and (min-width : 320px) { and change the font-size to 15px. Instead of changing the font size to 15px only at 320px screen it does it for the whole page. I've tried using font-size-adjust, but that didnt work.

Here is sample code from it:

 .keep-button {
    height: 70px;
    width: 430px;
    background-color: #C60;
    margin: auto;
    margin-top: 115px;  
}

h5 {
    font-size: 25px;
    color: #FFFFFF;
    text-align: center;
    padding: 20px 0;
}


@media only screen and (min-width : 320px) {

.keep-button {
    max-width: 50%; 

}

h5 {
    font-size: 15px;
    font-size-adjust: .50;  
}


}

Answer 1

I think you need change @media only screen and (min-width : 320px) to @media only screen and (max-width : 320px) . Now when page will be less than 320px your rules will be applied. Also, try understand this article about media queries.