Trouble implementing media queries (code available)

Having trouble with my media queries, they're not working. Can someone please help me understand what's happening?

Current screen size: 241 (chrome, ie, ff)

CSS

@media screen and (max-width: 500px)
{
    body
      {
        width: 100%;
        background-color: black;
      }

  #header
    {
      display: none;
    }
}

HTML

<!DOCTYPE html> 
<html>
<head>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Test</title>

    <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
    <link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet'  type='text/css'>
 </head>
 <body> 
     <div id="header">
         <p>This is my header</p>
     </div>

     <p>This is a paragraph</p>
 </body>
 </html>

Edited to correct spelling errors.

htmlcssmedia-queries

Answer №1

Make sure that your media queries are placed at the end of your style sheet so they are not overridden by other styles applied earlier.

    <style>
    @media screen and (max-width: 500px)
    {
    body
      {
        width: 100%;
        background-color: black;
      }
      #header
        {
          display: none;
        }
    }
    body {background-color: white;}
    </style>

In this example, the background-color of the body element will never change because the styling outside of the media query will take precedence over it.

Answer №2

Your current setup is already functioning independently:

<!DOCTYPE html> 
<html>
<head>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    @media screen and (max-width: 500px)
        {
        body
          {
            width: 100%;
            background-color: black;
          }
          #head
            {
              display: none;
            }
        }
    </style>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
    <link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet'  type='text/css'>
 </head>
 <body> 
     <div id="head">
         <p>This is my header</p>
     </div>

     <p>This is a paragraph</p>
 </body>
 </html>

Double-check for any conflicting media queries or potential stylesheet link issues.

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

Customizing the footer on various pages using Footer.php

For the past week, I've been working on updating our mobile site and have encountered an issue with the footer. It loads perfectly fine on the home page but crashes when viewing a regular page. Strangely enough, both pages are using the same footer.ph ...

csswordpress

How to lineup social media icons across on a Tumblr blog

I managed to successfully integrate the like and tweet buttons into my blog, but I'm struggling with aligning them horizontally after each post. My goal is to position the tweet button just to the left of the facebook like button for a cleaner layout. ...

htmlcssbuttonfacebook-liketumblr

Looking to align a radio button in the middle of an inline-block?

Is it possible to center a radio button within an inline-block? I have provided a demo on JSFiddle that displays the current layout and how I envision it should appear. Check out the demo here Here is the code snippet in question: <span style="widt ...

htmlcss

Is it possible to choose only half of the elements using the :nth-child selector in

Consider this code snippet: <ul> <li>Hello Universe</li> <li>Hello Universe</li> <li>Hello Universe</li> <li>Hello Universe</li> </ul> Can we select exactly half of the total elements by ...

htmlcsscss-selectors

PHP and AJAX for streamlined login form experience

Trying to log in through a popup login box using AJAX to determine if the login is successful. If successful, redirect to the header location, otherwise display an error message. Here is the code snippet: <script> $(document).ready(function () { ...

javascriptphpjqueryajaxhtml

Ensuring my website doesn't load within an iframe using PHP

I attempted to prevent my site from loading in other locations, but unfortunately, my efforts were unsuccessful even after using the following code. <?php header(X-Frame-Options: allow-from https://example.com); header(X-Frame-Options: deny); ?> Is ...

phphtmlhttp

Encountered an issue when attempting to send data using this.http.post in Angular from the client's perspective

Attempting to transfer data to a MySQL database using Angular on the client-side and Express JS on the server-side. The post function on the server side works when tested with Postman. Here is the code snippet: app.use(bodyParser.json()); app.use(bodyPa ...

javascripthtmlangulartypescriptexpress

Unable to assign image src to a dynamically generated div

My current task involves setting the background URL of a dynamically created div in JavaScript, intended for use with the jQuery Orbit slider. Below is my approach: var content1 = null; $("#featured").html("<div id='content' style='&apos ...

javascriptimagehtmlsrcorbit

jQuery code not being triggered on secondary page

I'm currently working on a website project for one of my university courses (Link: ) and I'm encountering an issue that I could use some help with. The problem involves a "back-to-top" button that uses jQuery to smoothly scroll the page upwards. ...

javascriptjqueryhtml

The issue of Bootstrap icons not displaying on the front-end arises when integrating them into a Vuejs Template

I'm in the process of constructing a web application using Vue.JS. I've integrated the [Bootstrap Icons][1] into my application, but for some reason, the icons are not showing up on the screen. Here are the steps I followed: Installed Bootstrap ...

htmlcsstwitter-bootstrapbootstrap-4vuejs2

Accessing the data from an HTML5 slider using JQuery

Having some difficulty fetching a value from an HTML5 slider using JQuery. Here is my code snippet: JQuery Code: // Getting the value from slider one $("#submit").on("click", function(evt) { var sliderValue = $('#slider01').attr('value ...

javascriptjqueryhtml

Properly aligning sub-divs within a parent div using CSS

I'm facing a problem with my CSS styling that I need help with. Here is the screenshot of the issue I am trying to center align the inputs, each placed in its own div, within my form. Below is the HTML markup for the form: HTML Markup Code CSS st ...

htmlcssalignmentstylesheetmarkup

AngularJS fails to fetch data from API queries

Currently facing a challenge with retrieving API data in my AngularJS project. The code below successfully fetches the data and logs it on the console as an array, but I am unable to access and utilize it in the front-end. Please note that the placeholder ...

htmlangularjsangularjs-scope

The variable in the HTML input value is not fully visible when filling out the HTML form

I am working with a Python Flask code where I have passed a dictionary to an HTML form. The table in the form correctly displays both keys and values, but when trying to populate a form field with the value from the dictionary, only the first word is displ ...

pythonhtmlinputflask

Adjust transparency according to the information extracted from the AnalyserNode

Currently, I am exploring ways to animate text opacity based on the volume of an audio file. While browsing online, I came across this specific codepen example, which showcases a similar concept. However, as I am relatively new to JavaScript, I find it ch ...

javascripthtmlcssaudio

Ensure that all divs have the same height and padding when resizing

I have 3 divs nested within a parent div. My goal is to dynamically set the height of all the child divs to match the height of the div with the maximum height, even when the screen resizes due to responsiveness. Below is my HTML structure: <div class ...

javascriptjquerycss

What is the method for inserting form control values into a QueryString within HTML code?

Struggling with passing HTML form control values into a QueryString for page redirection. While I can easily input static values into a QueryString and retrieve them using PHP's GET method, I am encountering difficulties when it comes to dynamic valu ...

phpjavascripthtmlquery-string

What is the proper method for delivering Javascript code with rendered HTTP to a client?

During the development process, I made a decision to switch to server-side rendering in order to have better control and take advantage of other benefits. My web application relies heavily on AJAX with no url redirecting, creating a website that dynamicall ...

javascriptjqueryhtmlajaxdjango

When saving, generate a new object and send it to the designated endpoint

I'm feeling a bit confused, unsure of how to proceed. In my program, the task is to upload images (in base64 format) and add them to an array with a maximum limit of 5. After uploading the images, the next step is to click a button labeled Save to s ...

javascripthtmlangularjspost

The applet failed to load on the HTML webpage

I'm having trouble getting this applet to load on an HTML page. I've already added full permissions in the java.policy file and I'm using the default HTML file from NetBeans Applet's output. /* Hearts Cards Game with AI*/ import java.a ...

javahtmlapplet