According to https://developer.mozilla.org/en-US/docs/Web/CSS/#import,
list-of-media-queries is a comma-separated list of media queries
conditioning the application of the css rules defined in the linked
url. If the browser doesn't support any of these media types, it won't
even load the linked resource.
So what I want to know is, if I have:
#import url('portrait.css') screen and (orientation:portrait);
does this mean that if or when I resize the width of the web browser on my desktop PC so the width is less than the height of the web browser, the portrait.css file will override the current style?
Or does it only load the portrait.css file on page load and if the viewport width is already less than its height?
http://www.hongkiat.com/blog/css-orientation-styles/
#media all and (orientation:portrait) {
/* Styles for Portrait screen */
}
#media all and (orientation:landscape) {
/* Styles for Landscape screen */
}
so whenever width is less than height , this shall be a portrai , eventually will load your css file , even if the original screen was initialized at landscape.
That'll just make your imported css file to work on certain conditions. That's one of my favorite feature, too. For example, you have this piece of code:
body {
color:green;
}
When you import this using the conditional media query, for example orientation:portrait, your style will be 'modified' so that if the orientation is portrait, the color will change to green.
Quoting from csswg's documentation of the media query:
The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
A simple case is if you use a mobile browser, of course. Since the orientation is generally portrait. In the desktop, this would take effect if you resize the window, and thus changing the orientation.
An excellent example is here in this page
Related
I have written some HTML and CSS for a website, and some media queries to reformat the code when the screen shrinks. This works on browsers, when I shrink the browser window size, but isn't working on mobile devices. Can anyone think of why? See the Media CSS below:
#media screen and (max-width:500px) {
#education-table td {
display: block;
text-align: center;
}
}
Thanks in advance!
I have looked at similar issues and thus added the "screen and", but this has not fixed the issue.
Update: I am testing the code on a pixel 7. When resizing the browser to the same width as my phone it works perfectly. I have ensured my phone width is indeed below 500px. TO clarify, this code works when used on a browser where I have both emulated a pixel 5 (through dev tools on edge) as well as just resizing the browser window. However, when I load the same site on my pixel 7 (and a pixel 6a, + Samsung galaxy a30) this CSS does not kick in, and it loads the standard "desktop" CSS styling - so the columns of tables do not collapse and are impossible to read
This code is valid CSS and works like intended. It just applies to devices with screens smaller than 500px. I would recommend you to set the size to something higher like 768px.
The screen and just ensures that the style is only applied to normal screens and not the print-view or anything else.
As others mentioned, your code is correct and should work on mobiles, it just depends on their screen size.
If you want to reformat your layout for mobiles in portrait orientation independently of their screen width, you might want to consider the following:
#media screen and (orientation: portrait) {
#education-table td {
display: block;
text-align: center;
}
}
Solved it!
I needed to add this line to the HTML document -->
It was not linking the device width before I added this meta tag. Thanks for the help from you all
Background
I have a web application that works both on desktop (rendered inside iframe, fixed width align right), and mobile (full screen). And I'd like to create a CSS rules (within inside the iframe's document) with media queries that applies only to mobile devices, but not desktop.
More Specific Background
Thanks to #Andy that's asking the right questions in the comment.
Our application is sold as two different products. The standalone application (i.e. non-iframe) and the embedded application (i.e. iframe) within our client's website. The two products have two different styling requirements: the standalone application will have global styling across our clients, while the embedded application must match each client's website color schemes
When integrating embedded application on our client's mobile site, we found that they have <meta name="viewport" content="width=320"> that zooms in all elements, we couldn't edit this meta tag. Therefore we'd like to apply a CSS rule only for embedded application, mobile view, and this client only, to fix the enlarged elements.
CSS Media Query max-width
Using the standard max-width query won't work because even on desktop the width recognized is the iframe's width so it's always considered mobile.
#media screen and (max-width:480px) {
... /* this still runs on both mobile and desktop */
}
CSS Media Query max-device-width
Searched and read around the internet and found max-device-width:
#media screen and (max-device-width:480px) {
... /* this runs on mobile devices only */
}
at first this seem to work as it looks for device's width instead of document's width. However my concerns are:
device-width query is deprecated https://stackoverflow.com/a/18500871/1019950
On desktop's (i.e. Chrome) mobile emulator,max-device-width still considers desktop's screen width, so it doesn't apply the mobile CSS rules.
How to create a media query that works inside iframe and applicable to mobile-devices (or mobile emulator) only, i.e. top document's width is less than 480px?
This is tricky one. The way I solved this was by calling a function in parent using postMessage to return the width of browser viewport, I then set a class dynamically on the elements that require mobile only CSS styling.
I am happy with final solution though as it is robust.
jQuery Example
In parent page
window.addEventListener('message', event => {
var width = jQuery(window).width();
var iFrame = document.getElementById('iframe_id');
iFrame.contentWindow.postMessage({"get_parent_width":width}, "*");
}, false);
In iFrame
window.addEventListener('message', event => {
var width = event.data.get_parent_width;
if(width < mobile_trigger_width || isMobile){
..custom rules for mobile
jQuery("#div_id").addClass("mobile");
}else{
..custom rules for desktop
jQuery("#div_id").removeClass("mobile");
}
}, false);
I was making a website, with this HTML and CSS files :
https://pastebin.com/Ldh12gt7 for HTML
https://pastebin.com/8igc0DXm for CSS
It renders perfectly on my browser, and also renders perfectly on other browsers, but on my PC.
My resolution is 1920x1080, and the website is shown there https://i.imgur.com/OOnhDSa.png
But, when a my friend tries to load it on a 1680x1050 resolution, the website appears to be like this https://i.imgur.com/gmSgAPx.png
How can I fix this? I already tried to this in many ways.
First, I setted all width and height with percentages.
Then, I used normalized.css(no effect, so I removed it).
So, I tried to set font-size with various values(vw, vh, ch, em etc. etc.) but didn't work.
Finally, I tried to catch user's resolution with #media and set zoom value: it worked but I can't do it for every resolution that exists.
Oh, also, my friend tried to set his resolution to 1920x1080, but nothing changed.
You should use media queries as:
Change the *value* accordingly.
To configure the CSS for the smaller screens then yours:
#media only screen and (min-width: *value*) {
.class_name{
//new CSS property
}
}
To configure the CSS for the larger screens then yours:
#media only screen and (max-width: *value*) {
.class_name{
//new CSS property
}
}
After that, you can check the responsiveness and view of your webpage on the different screen size devices using this application
I have a media query:
#media only screen and (max-width : 729px) {
.playertracklist{
display:none;
}
}
but when i resize my window the css media query gets applied when the width reaches 657px. Im using Chrome and the scale of the window is correct meaning im not zoomed in or out.
If you want it to hide at 729px exactly you could try using width instead of max-width.
If you want it to hide from 729px and above(which would guess you'd want) it might be better to tell the CSS to start hiding above 729px, and not below, as you are doing now.
If you change
#media only screen and (max-width : 729px) {
to
#media only screen and (min-width : 729px) {
it should work.
As Marcel W, said you could leave the only part away. It makes small difference for newer browser, but it makes a big difference in older browsers.
The only part gets ignored by older user agents as they don't reconize the property, thus letting you hide that part of the stylesheet from them. A newer user agent just ignores it and continues with the rest of the media query. Meaning that it is up to you to decide if you will or won't use it. If you want more info over only check this link
To make this short and simple, I have a <div> in which I wish to be hidden if the user's resolution is 1024x768.
So if I have a separate CSS file for the css left_bar, then the template with <div id='left_bar'> how would I go about having the resolution check query?
#media all and (width:1024px) and (height:768px) {
/* CSS rules here */
}
Although, that's awfully specific. Usually you use media queries with min-width or similar.