In JavaScript the orientation mode can be detected using: if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } However, is there a way to detect the orientation using CSS only? Eg. something like: @media only screen and (width > height) { … } 5 Answers 5
I’m trying to use CSS3 media queries to make a class that only appears when the width is greater than 400px and less than 900px. I know this is probably extremely simple and I am missing something obvious, but I can’t figure it out. What I have come up with is the below code, appreciate … Read more
I am using Twitter Bootstrap on a project. As well as the default bootstrap styles I have also added some of my own //My styles @media (max-width: 767px) { //CSS here } I am also using jQuery to change the order of certain elements on the page when the width of the viewport is less … Read more
I’m new here at this company and we have a product that uses miles of css. I’m attempting to make a printable stylesheet for our app but I’m having issues with background-color in @media print. @media print { #header{display:none;} #adwrapper{display:none;} td { border-bottom: solid; border-right: solid; background-color: #c0c0c0; } } Everything else works, I can … Read more
In the styles.css, I am using media queries, both of which use a variation of: /*–[ Normal CSS styles ]———————————-*/ @media only screen and (max-width: 767px) { /*–[ Mobile styles go here]—————————*/ } The sites resize to the layout I want in a regular browser (Safari, Firefox) when I shrink the window, however, the mobile … Read more
Similar to “How to detect if OS X is in dark mode?” only for browsers. Has anyone found if there is a way to detect if the user’s system is in the new OS X Dark Mode in Safari/Chrome/Firefox? We would like to change our site’s design to be dark-mode friendly based on the current … Read more
I’ve got a large site that runs in ASP.NET MVC using the Razor view engine. I have a base stylesheet which contains all of the generic styling for the whole site. On occasion, however, I have page specific styles which in the <head> of the page – usually this is one or 2 lines. I … Read more
I found this piece of code in a CSS file I inherited, but I can’t make any sense out of it: @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } Specifically, what is happening on the first line? 9 Answers 9
I need to develop some html pages for iphone/android phones, but what is the difference between max-device-width and max-width? I need to use different css for different screen size. @media all and (max-device-width: 400px) @media all and (max-width: 400px) What’s the difference? 8 Answers 8
I am trying to use CSS variables in media query and it does not work. :root { –mobile-breakpoint: 642px; } @media (max-width: var(–mobile-breakpoint)) { } 9 Answers 9
