Unable to see media queries on desktop by default, but can easily view them by inspecting the page

As I delved into a tutorial on media queries, I encountered a perplexing issue. Upon opening the HTML file in Chrome or Firefox, all I saw was a blank page with no content displayed. However, upon inspecting the page, the code appeared as expected and I could see the media queries in action. Despite my attempts to tweak the min-width and max-width values of the media queries to no avail, the page remained blank across all browsers. Below is the original HTML code from the tutorial.

<!DOCTYPE html>
<html>
  <head>
    <title>Beginners CSS - Chapter 8</title>

    <style type="text/css">
      * {
        margin: 0px;
      }

      main {
        margin: 10px auto;
        width: 600px;
        padding: 30px;
        margin-top: 0px;
        background-color: olive;
        display: block;
      }

      @media screen and (max-width: 350px) {
        main {
          background-color: #88a5e0;
        }
      }

      @media screen and (min-width: 600px) {
        main {
          background-color: red;
        }
      }

      @media screen and (min-width: 800px) {
        main {
          background-image: url('images/Reeds-in-Wind-Cinemagraph.gif');
          background-repeat: no-repeat;
          background-size: cover;
          padding-bottom: 400px;
        }
      }

      @media screen and (min-width: 1000px) {
        main {
          background-image: none;
          background-color: #fff;
        }

        h1,
        p {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Media Queries</h1>
      <p>Media allows you to make your pages to change to fit any device.</p>
    </main>
  </body>
</html>

Answer №1

When you open the developer tool on the right or left dock, the screen width changes. This means that the elements you are seeing may be coming from the min-width: 800px media query.

At a minimum width of 1000 pixels, the page is not simply a black screen with nothing displayed. Looking at the code below, you can see that the background-color is set to white, the h1 and p are hidden, and the background-image is removed when the minimum width is 1000px.

@media screen and (min-width: 1000px) {
  main {
    background-image: none;
    background-color: #fff;
  }

  h1,
  p {
    display: none;
  }
}

Answer №2

Your screen is not empty. Based on your code, for screens wider than 1000px, you have defined the following styles:

@media screen and (min-width: 1000px) {
  main {
    background-image: none;
    background-color: #FFF;
  }

  h1, p {display: none;}
}

As a result, the h1 and p elements will be hidden, and the background will be white. When you resize the window, other media queries will take effect. Additionally, resizing the window can be observed by opening your developer tools.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I enable drag-and-drop functionality for my carousel?

I'm encountering an issue with my carousel. I utilized a bootstrap carousel template and added my own images for the slides. I included jQuery to make it draggable, along with the necessary CDN links. However, while it is now DRAGGABLE, it no longer c ...

Tips for identifying when a change has been made to a SCSS file or any of its partial files

Looking to incorporate sass into a Ruby script but want to compile only when necessary. The typical method for compiling involves using the following code: require "sass" Sass::Engine.new(File.read(scss), options).render By utilizing appropriate hash val ...

Is it possible to eliminate the *:after effect for specific elements in my CSS?

I struggle with CSS, so I decided to use a library that includes the following CSS code: *, *:before, *:after { box-sizing: inherit ; } While this code works well for some views, it messes up others and is unnecessary for some. For instance, in this b ...

Display mobile app components directly inside HTML tags within a webview

Is it possible to integrate our native Android components within regular HTML content and display them on a webview? For instance, instead of a standard button in a basic HTML page, can we replace it with a Native Android Button? How would this be accomp ...

Issue with ng-repeat causing HTML table data to not appear

Trying to create a Flask web app, I encountered an issue while attempting to display tabular data on my webpage using AngularJS. Despite using ng-repeat to iterate through the data, it doesn't seem to work and no errors appear in the console. Can anyo ...

Finding image input loading

When working with the following code: <input type="image" ... onLoad="this.style.opacity = 1" /> Everything seemed to be functioning well in IE, but encountered an issue in Chrome where the onLoad event failed to trigger upon image load. It's ...

Ajax - Retrieving data from a different webpage

My index.php contains the following HTML: <div id="showDetails"> </div> <div id="showList"> </div> And this Ajax function is also in index.php: function ...

Ensure that each row contains no more than 5 items, and use flexbox to automatically resize

I currently have the following setup: .container { background: gray; width: 600px; display: flex; flex-flow: row wrap; position: relative; } .item { background: blue; width: auto; height: auto; margin: 4px; flex: 1; flex-basis: 20% ...

Using a pug template to render a dynamically generated SVG code

I am attempting to include an SVG in my pug template, but I am encountering issues. I am using r6operators from marcopixel, which provides a function operator.toSVG() that returns the XML string of an SVG. When I try this: p some text #{operator.name} ...

Does text disappear when hovered over in CSS?

Having some trouble getting a text to display on hover over the parent container while adjusting the opacity. Despite trying multiple methods, it just won't show up no matter what I do! Here is my current code: .project{ position: relative; ...

Inline-block styling behaving incorrectly within span element

I am facing an issue with aligning a validation message inline with a textbox in my HTML code. Despite trying various options, the validation message appears just below the textbox instead of beside it. Below is the snippet of the code in question: HTML ...

NodeJS instructs open(html) to execute first before any other code is executed

I am evaluating whether nodeJS is a suitable solution for a project I am working on during my internship. To summarize: I need the basicNode.js file to wait until the open('./basic.html') command has completely opened the browser and loaded its c ...

Setting the z-index to place an absolutely positioned element below a relatively positioned one

I am currently facing a challenge where I need to position an element under another one that has already been relatively positioned. The blue box must remain relatively positioned due to specific constraints within the website development process. For bet ...

What is the solution to determining the width in AngularJS without taking the scrollbar size into account

How can I retrieve the window inner height without including the scrollbar size when using $window.innerHeight? ...

What is the best way to retrieve the inner HTML or text content of a tag?

How can I retrieve the text value of an anchor tag in HTML using only golang.org/x/net/html, without external libraries? In my code sample below, I am able to extract the values of href and title with html.ElementNode. However, I need a way to specifically ...

Extracting pictures with py Jupyter

While attempting to scrape images from this URL using Python in Jupyter: https://www.adobe.com/products/catalog.html?sort=name&types=pf_252Fdesktop&types=pf_252Fmobile&types=pf_252Fweb&page=1, the code I ran resulted in the following error: ...

Enroll a nearby variable "Data" to an Observable belonging to a different Component within an Angular application

Looking to update the HTML view using *ngIf, depending on a local variable that should change based on an observable variable from a shared service. HTML <div class="login-container" *ngIf="!isAuthenticated"> TypeScript code for the same componen ...

Leveraging Vue Data for Storing CSS Properties

I am currently utilizing the Quasar framework in conjunction with Vue for my application development. Below is a snippet of my code: <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"> Save </q-tooltip> <q-tooltip c ...

Display the actual runtime hyperlink while utilizing the asp tag helper

Whenever I use asp-tag helpers to create a hyperlink, the result is displayed like this: <a asp-page="/demo">Demo</a> The actual html output looks like this: <a href="/test/Demo">Demo</a> However, instead of displaying "Demo" to ...

"Creating a dynamic Map using the HERE Maps API and adjusting its size: A step-by-step guide

I am currently working on a Website project and I am interested in incorporating an interactive map from HERE Maps that spans the entire screen under my navigation bar. How can I achieve this? After initially using Google Maps, I switched to HERE Maps due ...