Media queries not working inside an iframe

Try it this way, instead of device just target the width

Change

@media only screen and (max-device-width : 640px) {

to

@media only screen and (max-width : 640px) {

Also, it is more advised to target both min and max view-port width if you want to avoid considering order of media query declarations in your style-sheet

@media screen and (min-width: 320px) and (max-width: 640px) {
    .header-text {
       background-color: blue;
    }
}