1

I'm sure what I might be doing wrong here but my media queries don't seem to be working on this new mainly bootstrap based website I'm working on.

In my HTML sheet I have placed within the head tags:

<meta name="viewport" content="width=device-width, initial-scale=1">

Then on my CSS I have something like this:

Mobile CSS

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  h1 {
    font-family: 'Lato', sans-serif;
    font-style: normal;
    color: #000000;
    font-size: 6.5vw;
    letter-spacing: 0.50em;
    margin-left: 3%;
  }
  h2 {
    font-family: 'Lato', sans-serif;
    font-style: normal;
    color: #000000;
    font-size: 1.5vw;
    letter-spacing: 0.25em;
  }
}

Any help would be very much appreciated, Thanks!

vanburen
  • 21,502
  • 7
  • 28
  • 41
user6949247
  • 21
  • 1
  • 1
    First I would check to make sure the css file you are editing is the last css file inserted in the head of your pages. If there are others below it they may override your changes. – Action Coding Nov 03 '16 at 23:23
  • Agree with @MichaelMcCoy.. These styles should be getting applied to all h1 & h2 tags when the screen size is in between 320px and 480px. If not, there is other css overriding these styles. Also, make sure your other styles are not using `!important` declaration in your css. – Joe Conlin Nov 04 '16 at 00:23
  • 2
    Have you tested this on a mobile device/device emulator because you won't see any changes otherwise. See https://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web just in case. – vanburen Nov 04 '16 at 00:27
  • @MichaelMcCoy Thank you for your feedback but it seems like I dont have any other css file inserted in my code...so this is indeed very strange, and I still havent quite figured it out how to make this work... Ive used media queries in the past and this never happened before. – user6949247 Nov 04 '16 at 16:58

1 Answers1

0

Write it like this

@media (min-width: 320px) and (max-width: 480px)
toast
  • 660
  • 1
  • 5
  • 12