why is my grid non responsive even with media queries in place?

[miryamfv]

Im sorry to bother you but im not finding a solution.

All the examples I am finding about responsive grid are based or your example of explicit areas. But In my case all the 9 items are the same. However when I shrink the browser it wont auto place. Im not sure what is wrong. If I view it as ipad using the console tools it looks as desired but if I am on desktop and I resize the browser it wont automatically respond and its killing me. Thanks in advance

here is the code:

http://webmagictulum.com/iknah/tours/

@media only screen 
  and (min-device-width: 768px) {
section.tours { display: grid; grid-gap: 2em; grid-template-columns: repeat(2, 1fr); }
}

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

    section.tours { grid-template-columns: repeat(3, 1fr); }
}

[webcraftsman]

@miryamfv I think your problem is that you are using min-device-width instead of min-width. Your layout will not respond because it is based on device and not screen width.

I could be wrong because I am testing in a browser. If you want to use device-width, you probably need to add orientation: landscape or orientation: portrait to your media query. Otherwise you are not going to see a change.

@media only screen and (min-device-width: 768px) and (orientation: portrait) { ...

@media only screen and (min-device-width: 1024px) and (orientation: landscape) {...

[miryamfv]

That was exactly the problem but i was all deep down into the rabbit hole to notice! Thanks you so much. You saved me lots of time n.n!