responsive testing site not working

by 6 replies
7
I am working with Wordpress and trying to get the media queries to run. I used a test site here: Responsive Design Testing

When using it, the browser seems to indicate that it ALWAYS goes to
Code:
@media screen (min-width: 1201px) and (max-width: 1600px) {
No matter how the browser is resized. I can have it really tiny and it still tries to run stuff under 1600px.

The problem page is here: here


Below is what is set up in the CSS file. Why are the media queries not working?


Code:
@media screen and (max-width: 240px) {
}
@media screen (min-width: 241px) and (max-width: 320px) {
}
@media screen (min-width: 321px) and (max-width: 480px) {
}
@media screen (min-width: 481px) and (max-width: 768px) {
}
@media screen (min-width: 769px) and (max-width: 920px) {
}
@media screen (min-width: 921px) and (max-width: 1024px) {
}
@media only  screen (min-width: 1025px) and (max-width: 1200px) {
}
@media screen (min-width: 1201px) and (max-width: 1600px) {
}
#programming #responsive #site #working
  • If media queries are empty there is nothing that will resize then.

    Tested on my site Test responsive design ยป responsivedesigntest.net ... and it worked.
  • Thanks for the response. Basically, there is information in the media query - I just did not list it out

    If I look at the browser debugger, there is no indication that the media query is being "called".

    What can I do to fix this?
  • My first thought was this:
    Have you checked that the correct version of your CSS is being used by your browser? Also, verify that there aren't any rules conflicting with your CSS causing it to be ignored.

    But then I checked your site and I'm not seeing the media queries in the CSS at all. Did you remove them? Are they inline or in a file?
    • [1] reply
    • Thanks for the response. They are part of a child theme.

      I did some research and it seems to be OK for Chrome or Internet Explorer -but - I am having some woes with Firefox The site is here: Map Search | Mike Jones Real Estate

      What I have is a fixed-size item (which is the form on the right hand side) and the map (which is on the left hand side).

      I know percentages are supposed to be the best way when working with responsive media queries - but - I suppose I ran out of patience with the form and just made a fixed number in pixels.

      So, it is something like:

      .mapclass {
      width: 80%;
      }

      .formclass {
      width: 200px;
      }

      <div id="allitems">
      <div id="leftsidemap" class="mapclass">
      </div>
      <div id="rightsideform" class="formclass">
      </div>
      </div>

      Can this work? Is there a way for this to work in a responsive situation? Everything seems to be OK with Google browser or IE - but Firefox - again - gives me the blues.

      I have a second question but I suppose I will post it in another thread ...
  • Can I use... Support tables for HTML5, CSS3, etc
    • [ 1 ] Thanks
    • [1] reply
    • Thanks for the info.

      Is there a way to keep people from certain browsers from accessing a website? According to the link, there are some browsers out there that do not support media queries and if they do do so, they are "buggy".

      So, what can I do to keep them out? How can I setup a message saying something like "your browser is too old to run this site"?

      TIA
Join the discussion

Next Topics on Trending Feed