Inquiry about CSS Media Queries

I am facing an issue with CSS media queries...

For my HTML page, I have separate files for desktop and iPad styles - desktop.css and ipad.css. In desktop.css, I have used @import url("ipad.css"); and added a @media not only screen and (device-width:768px) block for desktop styles.

This is how desktop.css looks like:

@import url("ipad.css");

@media not only screen and (device-width:768px)
{
//Desktop styles
}

While the iPad CSS is getting applied correctly, the desktop styles are not rendering. I am unsure about what's wrong with the "@media not only screen ..." statement.

After referring to http://www.w3.org/TR/css3-mediaqueries, I found out that using 'not' at the beginning of the media query negates the result. However, in this case, it doesn't seem to be working as expected.

Can someone please help me figure out why the desktop styles are not being rendered? Thank you!

*EDITED*

What could possibly be causing this issue?

@import url("desktop.css") screen;
@import url("ipad.css") only screen and (device-width:768px);
javascripthtmlcssw3cmedia-queries

Answer №2

Consider testing something along the lines of

@media only screen and (min-device-width: 768px) {
/* place desktop styles here */
}

In this case, omit the not since it is causing the rule to target all devices except the screen, specifically the desktop in your situation.

Answer №3

solely screen indicates that only the screen is responsible for rendering this content. The not on the other hand, reverses this meaning so that all elements except for screen will display it.

Answer №4

To implement this, you have a couple of options:

  <style type="text/css">
   @import url("desktop.css"); 
   @import url ("ipad.css"); 
   </style>

In the above code snippet, make sure that desktop.css does not include any @ media query rules and ipad.css starts with 

@media screen and (max-width: 768px) {/*your code here*/}
.

Alternatively, you can simply link to both CSS files in the order of preference, with ipad.css following desktop.css.

<link rel="stylesheet" type="text/css" href="css/desktop.css"/>
<link rel="stylesheet" type="text/css" href="css/ipad.css"/>

In this scenario as well, ensure that desktop.css begins without any @ media rules and ipad.css includes a 

@media screen and (max-width: 768px) {/*your code here*/}
rule at the start.

This setup ensures that all desktop browsers will read the desktop.css file, while those supporting media queries will also interpret ipad.css (when the screen size is below 768px).

However, please note that if implemented as described, Internet Explorer versions 8 and below may display unexpected behavior. This issue is detailed in an article available at this link.

If you want IE to properly handle media queries and resizing based on window changes, consider using a lightweight JavaScript library like the one found at this website. This library will help IE behave more like modern browsers when interpreting media queries :)

Keep in mind that solely ignoring media queries in IE might be a temporary fix. To fully enable IE to comprehend and adapt to these queries, assistance from external libraries may be necessary.

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

In need of changing the date format post splitting

I need help converting a date from MM/DD/YY to YYYYMMDD The current code I have is giving me an incorrect output of 2211. How can I implement a check on the Month and Day values to add a leading zero when necessary? var arr = '1/1/22'; arr = NTE ...

javascript

Updating the state using ui-router

The application consists of pages labeled as X, Y, and Z. The intended route is to navigate from page X to select details, then move onto page Y to select additional details, and finally land on page Z. I wish that upon clicking the window's back butt ...

javascriptangularjsangular-ui-router

What is the best way to merge all project modules into a single file using the r.js optimizer?

While working with the r.js optimizer, I noticed that the final index.html file doesn't seem to allow for referencing just a single script without making any async calls to other scripts during a user's session. It appears to generate multiple gr ...

javascriptnode.jsbuildrequirejsr.js

Incorporate parameters and data attributes with ScriptInjector in GWT

Is there a way to pass the id=someScript and param1=value1 to ScriptInjector in GWT? For example, consider the following JS code: <script src="https://blah.com/someScript.js" id="someScript" param1="value1"></script> In GWT, you can load it l ...

javascriptgwt

Having trouble locating the web element within a div popup while utilizing Node.js and WebdriverIO

I need assistance with a seemingly simple task. I am currently learning webdriverjs and attempted to write a short code to register for an account on the FitBit website at URL: www.fitbit.com/signup. After entering my email and password, a popup appears as ...

javascriptnode.jsseleniumselenium-webdriver

Why doesn't WebStorm display TypeScript inspection errors in real-time?

I'm currently utilizing WebStorm 2017.2.4 in conjunction with Angular 4.3 - I am facing an issue where TypeScript errors are not being displayed: https://i.sstatic.net/pcLQX.png Query How can I enable real-time inspections to occur immediately? (I ...

javascriptangulartypescriptwebstorm

Adjust the anchor tag content when a div is clicked

I have a list where each item is assigned a unique ID. I have written the HTML structure for a single item as follows: The structure looks like this: <div id='33496'> <div class='event_content'>..... <div>. ...

javascriptjqueryhtmlcss

Inaccurate data saved to a cookie

I attempted to assign a string from PHP to a cookie and retrieve the value of that cookie using JavaScript. Take a look at my code snippet: <php $date=date('Y',time()); //assume it is 2017 setcookie("Year", $date, time() + 3600, "/"); ?> ...

javascriptphp

Submitted input in a text field is automatically displayed in a separate text box

Below is a snippet of HTML code from my AngularJS application <input type="text" class="input-xlarge" id="user_name" ng-model="myModel.text" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-titl ...

htmlcsstwitter-bootstrapangularjsangularjs-directive

The application runs smoothly during development, but encounters issues once deployed on Heroku

I am encountering an issue while deploying my app on Heroku. The deployment process goes smoothly, but when I try to open the app, I receive the following error message: Application error An error occurred in the application and your page could not be ser ...

javascriptnode.jsreactjsmongodbheroku

Changing the Class of an Element in a Different Component with Angular 2+

Currently in a project utilizing Angular 4, I have implemented two components: app.component and other.component Within app.component.html, there exists a div with the name attribute myClass. <div class="myClass"></div> In the other.componen ...

javascriptangulartypescript

Experiencing difficulties with a click event function for displaying or hiding content

Struggling with implementing an onClick function for my two dynamically created components. Currently, when I click on any index in the first component, all content is displayed. What I want is to show only the corresponding index in the second component ...

javascripttypescriptstenciljs

Utilizing the Vuex/Redux store pattern to efficiently share a centralized source of data between parent and child components, allowing for customizable variations of the data as

Understanding the advantages of utilizing a store pattern and establishing a single source of truth for data shared across components in an application is essential. Making API calls in a store action that can be called by components, rather than making se ...

javascriptreactjsvue.jsreduxstore

Permission for geolocation must be granted every time when using Safari and mobile browsers

My website requests geolocation permission but has a recurring issue. When accessed on mobile (using Chrome or Safari) or desktop Safari, the permission prompt pops up every time a page is reloaded. However, when accessing the site on a computer with Chro ...

javascriptwordpressgeolocation

Having trouble implementing new controllers in AngularJS UI-Router for nested states?

I'm currently facing an issue with nested states in the ui-router. My task involves rendering a page that includes regions, countries, and individuals per country. In the index.html file, there are three regions represented as links: EMEA, APAC, and ...

javascriptphpangularjsangular-ui-router

Guide to creating a dynamic illumination using CSS, HTML, and JS

Can you help me create a unique lighting effect for a specific section of my webpage? I'm curious about the techniques needed to achieve a similar effect as seen on another webpage. Is it feasible to create this effect using only CSS and HTML, or are ...

htmlcsslighting

What is the reason for Range.getBoundingClientRect() returning 0 for a range that is inside a textarea

When working with a <textarea> element and creating a range inside it, the following steps are taken: A new range is created using document.createRange() The only child node of the <textarea> is retrieved using textarea.childNodes[0] Range st ...

javascripthtmlcssrangegetboundingclientrect

Switch out one picture for another by hovering over it

Looking for a way to replace the holder-01-small.png image with one of the same dimensions on hover without altering the HTML code. Here is the code snippet: <div class="mix category-1"> <a href="img/holder-01-large.png" class="photo"> <i ...

htmlcsshoverpseudo-class

Is it possible to prevent users from clicking on a jQuery UI Datepicker?

Is it possible to disable the functionality of a jQuery UI Datepicker so that clicking on it does nothing but display the date? I attempted: $("#calendar").datepicker({ disabled: true, altField: '#note_date', maxDate: 0 }); Unfortu ...

javascriptjqueryjquery-uidatepickeruidatepicker

Users report text-shadow not working in Opera browser

Recently, I incorporated a text block into a section of my webpage that utilizes parallax scrolling. This particular text block has been styled to include a subtle text shadow effect. However, when viewing the page in Opera, I encountered an issue where I ...

htmloperashadowcss