Jump to content

Search the Community

Showing results for tags 'media query'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 4 results

  1. Hi gang, thanks for taking some time to check this out. I'm driving myself insane trying to figure out why I can't see the changes I make in my media queries on my phone. They work as they should on all browsers. The caveat is that I do in fact have <meta name="viewport" content="width=device-width, initial-scale=1"> in the head of my index. Most posts I see out there don't have that in their html and once they post that it clears up for them. I am hosting my site on bluehost and I do use Cloudflare. I once learned that purging the files on cloudflare resets the cache so that you can see the changes take effect. Basically, when I make a change in my media query, I up load it to the server, then I run over to cloudflare to clear the cache and when I refresh chrome on my LG Stylo 2 phone, I don't see the changes at all. In fact, it looks like it still inherits the previous version before any changes were made. What in heck am I missing?
  2. MarcosFM

    Media queries in px or cm?

    Hi! I've been reading about media queries in www.w3schools.com and then thinking about the screen sizes of mobile phones, tablets, laptops and desktops. As you can see in webpages like http://screensiz.es/ the width of a Huawei Nexus 6p (mobile phone) is 1440px, while the width of a Lenovo Thinkpad X230 (laptop) is 1366px. This means that the number of pixels of a screen doesn't tell us its real size and, therefore, I don't think it makes sense to create media queries in px, like the following example from www.w3schools.com: @media only screen and (max-width: 768px) { /* For mobile phones: */ [class*="col-"] { width: 100%; } } I think it would be better to write the above media query as follows (I think 14 cm is the maximum width you can find in mobile phone screens today): @media only screen and (max-width: 14cm) { /* For mobile phones: */ [class*="col-"] { width: 100%; } } Maybe I'm making a mistake, I don't know... Could anybody help? Thank you, Marcos.
  3. BACKGROUND: I have recently created a new page based on code used on another page that appears to be functioning well. As the content is different, however, it was necessary that I make several important modifications. Still, the basic format is the same, and I do not understand why the new content is not responding as it should. As always, I have tried a variety of experiments before coming to you including resetting the values of the width property of both the media rule and the media rule's content, reordering the script order of both the imported CSS files and their content, as well as the placement of the CSS rules that command the flex-box. My CSS selectors appear to be appropriate as I am able to generate change. Unfortunately, the desired change is not the change that I am generating. QUESTION: What is the most likely cause of the dysfunction? ORIGINAL PAGE: Observe the behavior of the pages navigation bar, main section, right sidebar, and footer as the size of your viewport expands and contracts. On my devices (iMac, MacBook, and iPhone) the behavior is the desired behavior. The various section appear to function well no matter the selected browser. http://www.grammarcaptive.com/overview.html NEW PAGE: Although the main content section is empty, the right sidebar does not function as intended under the second media rule -- this, despite its proper functioning under the first and third rules. http://www.grammarcaptive.com/podcast_dev_copy.html NOTE: I'll not place any code as everything is easily viewed online.
  4. Hello Friends, I have the following CSS class 'box' defined with 'min-width' media query. @media screen and (min-width: 768px) { .box {display:none} } But this class is not showing in dreamweaver class suggestions. But when I put the same class using 'max-width', then suggestion is showing as per the following screenshot. Anyone know whats the reason and how to resolve this. Thanks in advance. Thanks! Shaiju.