0

Hi I'm trying to make my site responsive. Now I have a media query that handles a certain screen size of devices but a different styling when viewing via web. It works just fine in chrome, safari and opera. But when trying in mozilla it seems that my media query is being executed eventhough I'm accessing it via desktop. Is there anything that I'm missing? Below is my media query

.my-target-class {
   display: inline;
}

@media only screen and (min-device-width: 400px) and (max-device-width: 600px) and (min-device-height: 300px) and (max-device-height: 750px){
      .my-target-class {
          display: block;
       }
}

As you can see I'm targetting a clas and display is change if its being viewed via mobile. But upon viewing on mozilla its running the @media screen query and applying ng display: block on the class. Any idea or fix for this? Would appreciate if explanation on why its behaving like this

enter image description here As you can see on the lower right part of the screenshot it's applying the css styling meant for mobile. Eventhough I'm acessing it via a desktop browser. I assume that if I place @media only screen this will only be applied when viewing on mobile. But it seems firefox is behaving differently

MadzQuestioning
  • 3,341
  • 8
  • 45
  • 76
  • @Highdef I tried that still no luck – MadzQuestioning Dec 22 '17 at 20:45
  • https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile Refer this –  Dec 22 '17 at 20:45
  • I'm confused by: "I assume that if I place @media only screen this will only be applied when viewing on mobile". What do you mean? – showdev Dec 22 '17 at 21:00
  • I found David Gilbertson's article very helpful in eliminating confusion when developing responsive designs: [The 100% correct way to do CSS breakpoints](https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862). – showdev Dec 22 '17 at 21:01

1 Answers1

0

Don't put outside your code. You have to wrap to your screen size for desktop also like this

@media screen and (min-device-width: 300px) and (max-device-width: 800px){
  .my-target-class {
      display: block;
   }
}
@media screen and (min-device-width: 801px) {
  .my-target-class {
      display: inline;
   }
}
Manoj A
  • 325
  • 3
  • 6
  • 13