media-queries

How to override css prefers-color-scheme setting

by

I have determined an appropriate solution, it is as follows: CSS will use variables and themes: // root/default variables :root { –font-color: #000; –link-color:#1C75B9; –link-white-color:#fff; –bg-color: rgb(243,243,243); } //dark theme [data-theme=”dark”] { –font-color: #c1bfbd; –link-color:#0a86da; –link-white-color:#c1bfbd; –bg-color: #333; } The variables are then called where necessary, for example: //the redundancy is for backwards compatibility with … Read more

CSS media query to target iPad and iPad only?

by

Finally found a solution from : Detect different device platforms using CSS <link rel=”stylesheet” media=”all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)” href=”ipad-portrait.css” /> <link rel=”stylesheet” media=”all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)” href=”ipad-landscape.css” /> To reduce HTTP call, this can also be used inside you existing common CSS file: @media all … Read more

iPhone X / 8 / 8 Plus CSS media queries

by

iPhone X @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { } iPhone 8 @media only screen and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2) { } iPhone 8 Plus @media only screen and (device-width : 414px) and (device-height : 736px) and (-webkit-device-pixel-ratio : … Read more

How can I detect Internet Explorer (IE) and Microsoft Edge using JavaScript?

by

Here is the latest correct way that I know of how to check for IE and Edge: if (/MSIE 10/i.test(navigator.userAgent)) { // This is internet explorer 10 window.alert(‘isIE10’); } if (/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) { // This is internet explorer 9 or 11 window.location = ‘pages/core/ie.htm’; } if (/Edge\/\d./i.test(navigator.userAgent)){ // This is Microsoft Edge window.alert(‘Microsoft … Read more

Should I use max-device-width or max-width?

by

TL;DR If you’re making a responsive website, use min-width/max-width in your media queries rather than min-device-width/max-device-width in order to target a wider range of screen sizes. According to the 2018 Media Queries Level 4 specification draft, the device-width media feature is deprecated. It will be kept for backward compatibility, but should be avoided. 8. Appendix … Read more

How to remove responsive features in Twitter Bootstrap 3?

by

To inactivate the non-desktop styles you just have to change 4 lines of code in the variables.less file. Set the screen width breakpoints in the variables.less file like this: // Media queries breakpoints // ————————————————– // Extra small screen / phone // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 @screen-xs: 1px; @screen-xs-min: @screen-xs; @screen-phone: … Read more

CSS Media Query – Soft-keyboard breaks css orientation rules – alternative solution?

by

I know this is a couple of years late but I found a great solution For landscape media: @media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */} And for portrait media: @media screen and (max-aspect-ratio: 13/9) { /* portrait styles here */} The full solution and why it works can be found here … Read more