Jump to content

Search the Community

Showing results for tags 'media query'.

  • 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 6 results

  1. PROBLEM ::: .navbar >:nth-child(3){margin:auto; } hover is not working in the media quires. Is there any other solution for this code? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> *{box-sizing: border-box;} .navbar { display: flex; background-color: #333; } .navbar > :nth-child(3){ margin-right: auto;
  2. I don't know a lot about media queries but I created them for a page on my website mainly for the resizing of text and all worked well except for an element which is not moving with other elements inside their container, but is being pushed up above them as you size down the browser window. I've extracted the relevant code and pasted it here. Can anyone tell me what I should be doing to keep the div called "browse" in the same relationship to the slideshow to its right? Thank you. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.co
  3. 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 tha
  4. 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 mo
  5. 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
  6. 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.
  • Create New...