What could be the reason why my media query is failing to work properly?

I have a total of 3 different stylesheets for my website:

<link rel="stylesheet" media="(max-width: 579px)" href="css/style-small.css">
<link rel="stylesheet" media="(min-width: 580px) and (max-width: 799px)" href="css/style-md.css">
<link rel="stylesheet" href="css/style.css">

Within the main style.css file, there is a specific media query that targets larger screens:

@media only screen and (min-width:965px){
    //css styles
}

Up to this point, everything seems to be functioning correctly. However, when it comes to the media query inside the style-md.css file:

@media only screen and (max-width:756px){
    nav.top-right{
        display: none;
    }

    blockquote{
        font-size: 1.35em;
        width: 80%;
    }
}

For some reason, this specific media query appears to be completely ignored. I can confirm that the CSS code exists by inspecting the page using Chrome's developer tools in the Sources tab. This issue persists even after refreshing the page. It doesn't seem to be a matter of precedence since when inspecting the targeted elements, the CSS code is visible but not being applied.

cssmedia-queriesresponsiveness

Answer №1

While this may be considered outdated information, I recently encountered a similar issue and discovered that a crucial meta tag was missing from the HEAD section of my code.

Rectifying this by adding the following line successfully resolved the problem:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

I share this in the hopes that it may assist someone facing a similar challenge in the future.

Answer №2

To streamline the process, consider consolidating all necessary CSS styles into a single stylesheet file and incorporate corresponding media queries using the traditional method: 

@media only screen {
/*css styles*/
}
@media only screen and (max-width: 964px) {
/*css styles*/
}
@media only screen and (max-width: 799px) {
/*css styles*/
}
@media only screen and (max-width: 756px) {
/*css styles*/
}

@media only screen and (max-width: 579px) {
/*css styles*/
}

UPDATE: (per suggestion by @Tony Barnes), an alternative is to adopt the mobile-first approach:

This would result in the following structure:

@media only screen {
/*css styles*/
}
@media only screen and (min-width: 579px) {
/*css styles*/
}
@media only screen and (min-width: 756px) {
/*css styles*/
}
@media only screen and (min-width: 799px) {
/*css styles*/
}

@media only screen and (min-width: 964px) {
/*css styles*/
}

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

Designing Interactive Circular Dates on Website

Currently, I am working on a webpage using HTML, CSS, JavaScript, and PHP. The goal is to design a page that features 7 circles representing the current date and the next 6 days. Users should be able to click an arrow to navigate to the following 7 days. ...

javascriptphpjqueryhtmlcss

Customizing Paths in Express Handlebars

I have a query regarding setting up custom folders in Express.js Here's my situation: I need to implement logic where if a specific name is present in my database, the paths for CSS and JS files should be altered before rendering. By default, my pat ...

javascriptcssnode.jsexpresshandlebars.js

Arranging DIV elements with flexbox and CSS

I have a straightforward layout featuring a 3-column design that consists of a back button, a main content section, and a forward button: <div class="container h100"> <div class="row align-items-center h100"> ...

htmlcssflexbox

Inaccurate sizing of popup dialogs on SharePoint 2010

Currently, I am in the process of revamping a SharePoint 2007 web application to SharePoint 2010. I was surprised to find that the popup dialog boxes for new items, edit, etc. have inline styles for fixed width and height. Below is an example where div.ms ...

jquerycsssharepointsharepoint-2010

Within jQuery Mobile, text appears obscured by a listview containing a count bubble

After creating a listview with count bubbles and item descriptions, I noticed that the description text is falling behind the count bubble. Is this a glitch in the code or something that can be fixed with CSS? echo '<li><a value="' . $r ...

cssjquery-mobile

Endless Background Image HTML/CSS

I'm currently working on a website where I'd like to have a background image that is black with some characters. The height of the page can vary, being either 'M' pixels or 'N' pixels tall. My goal is to show only one instanc ...

htmlcssimagebackgroundinfinite

The variation in letter-spacing within Chrome browser remains inconsistent despite the uniform font, size, and other settings

For a recent project, I was given the task of completely rewriting the html and css for a page in order to achieve the same visual result as before. During this process, I encountered an interesting anomaly while trying to align letter-spacing on an elemen ...

htmlcssfonts

Why does Internet Explorer display .png images in lower quality compared to other browsers?

My menu displays a .png file with smooth edges in most browsers, but in Internet Explorer it appears with rough edges. Can someone help me understand why IE treats .png files differently compared to other browsers? <li> <a href="" onclick=" ...

htmlcssinternet-explorer

Different method for adding child elements to the DOM

When creating a DOM element, I am following this process: var imgEle = document.createElement('img');     imgEle.src = imgURL;             x.appendChild(imgEle); Instead of appending the last line which creates multiple img elements ev ...

javascripthtmlcssdomappendchild

Trouble with centering navigation bar using HTML margin:auto

Below is the code snippet I'm currently working on: .nav-item { display: inline; color: white; padding: 30px 10px; font-style: bold; font-family: sans-serif; font-size: 20px; width: 1000px; margin: 0 auto; } .nav-container { back ...

htmlcssmarginnav

Item on the menu has been pushed lower in the list

There seems to be an issue with the layout of my menu as one item is displaying lower than the others without any clear reason. <html> <head> <title> My Website Homepage </title> </head> <body> ...

htmlcss

What is the best way to place an element above another without disrupting the layout of the document?

I have a scenario where I am layering a black div on top of a red div using absolute positioning. Subsequently, additional content is displayed. p { position: relative; z-index; 10 } .wrapper { position: relative; } #red { height: 300px; w ...

htmlcss

Is it possible to implement dependency injection within a .css document?

I have a C# .NET 6 application. Some of the web pages (Razor Pages) in the app use dependency injection to inject configuration into the Razor Pages (.cshtml files), allowing certain config elements to be displayed in the user interface. My query is, can ...

cssdependency-injection.net-6.0razor-pagescode-injection

Ways to set a default image for an <img> tag

I am looking to set a default image to the img tag in case the user has not selected a profile picture for their account. Here is the current output: http://jsfiddle.net/LvsYc/2973/ Check out the default image here: This is the script being used: funct ...

javascriptjquerycsshtml

Modifying the Inactive Tab Color in Material UI

For my application, I have a specific requirement where the active tab needs to be styled in red and the inactive tab in blue. Here is how the styling is set up: newStyle: { backgroundColor: 'red', '&$selected': { b ...

cssreactjsmaterial-ui

The drop-down menu selection is non-functional on mobile and iPad devices when using Bootstrap

<div class="panel panel-default"> <select> <option value="B3">B3</option> <option value="B4">B4</option> <option value="B5">B5</option> & ...

javascriptangularjshtmlcsstwitter-bootstrap-2

JavaScript programming does not rely on using the onclick method to style HTML elements

For a recent project, I was tasked with creating a toggle-style button setup for the challenge on CodePen. To achieve a 3D appearance for the button, I wrote some JavaScript code that utilized the onclick event. var on = true const green = document.getElem ...

javascripthtmlcss

Guide to populate Div content using JSON information

I am working with a JSON object that contains arrays, and my goal is to dynamically populate a div element. I have a dropdown menu (select option) that I want to fill with all the keys from my JSON data. Each key in my JSON has an array of data as its va ...

javascriptjqueryhtmlcss

What is the best way to affix this image to the bottom of the div?

I need the smaller, grey image to stay at the bottom of its container (meadow image) even when resizing the window. I've tried using auto values on attributes but it seems to be related to positioning which I can't quite figure out. Any ideas? Th ...

css

Is there a way to incorporate jQuery into SharePoint 2010?

I am encountering an issue with linking my HTML page to our organization's SharePoint 2010 portal. All necessary files (CSS, images, jQuery) are stored in the same document library. While the CSS is functioning properly, I am facing challenges with ge ...

javascriptjqueryhtmlcsssharepoint