I know can get a style for IE only using this CSS:
#media all and (-ms-high-contrast:none) {
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: green } /* IE11 */
}
and can make a site responsive using media queries:
#media only screen and (max-width: 800px) {
.foo { color: green }
}
How do I write the code to make a style for IE only at a certain screen size? Neither of the following is working for me, IE is just ignoring this style:
#media only screen and (-ms-high-contrast:none) and (max-width: 800px)
#media all and (-ms-high-contrast:none) and (max-width: 800px)
Thoughts?
IE, Safari, chrome & google. For some reason when I use flexbox my divs/columns take up more space on IE than the 3 other major browsers. So I have to specify a flex of 0 0 23% on IE if I want to 4 columns to fit on a page, otherwise the 4th column drops down below the other 3.
Then, when the browser size decreases (eg < 1000px), and I want it to be a 2-column layout, I would have to specify a flex of 0 0 48% on IE (with a flex of 0 0 50% everywhere else).
However, I don't know how to specify a 2 column layout of 48% for an IE screen of <1000px (while keeping it 50% on the other browsers).
Hopefully that makes sense.
Unless there's something I'm missing. I'm relatively new to flexbox so that's possible.
Related
I'm developing a photo browser with the Bootstrap framework. It has a 4:3 aspect ratio that I'm trying to make responsive. My basic approach is something like this:
#carousel {
width: 320px;
height: 240px;
...
}
and then use media queries to support larger device widths and heights so that #carousel grows, but not any larger than the device, e.g.:
#media (min-width: 576px) and (min-height: 390px) {
#carousel {
min-width: 513px;
min-height: 385px;
border: 1px solid blue; /* test attribute */
}
}
and so forth for larger devices.
This works fine overall and in the responsive testers built into Chrome and Safari. It does not work on my physical iPhone 13, however, which has a logical width/height of 390/844px. The previous media selector should fire when the phone is in landscape, but it doesn't. iPhone 13 in landscape mode doesn't fire until a much lower min-height in the media selector:
#media (min-width: 576px) and (min-height: 300px) {
#carousel {
min-width: 513px;
min-height: 385px;
border: 1px solid blue; /* test attribute */
}
}
Note that min-height in the media selector is much lower than min-height in the CSS definition. If the height actually was 300px then the carousel should not fit on the screen, but it looks just fine. Just not very efficient or sustainable.
I suspect what's going on is that Safari is subtracting the height of its address bar and tabs from the height value. In fact I'm sure of it, because I get different behavior depending on whether I have one tab open or several. If there is only one tab open (and thus no tab bar) then I can get the media selector to fire at min-height: 333px but with multiple tabs I need to lower it to min-height: 300px. Neither one is actually correct, since if the user scrolls down in the browser then Safari hides the toolbar and makes the entire device height available (something similar happens on larger devices such as iPads).
Does anyone know how to query the effective display height from iOS Safari?
I solved this—reluctantly—with a media query condition that specifically targets the iPhone 12 Pro/13 in landscape mode:
#media (min-width: 576px) and (min-height: 300px),
(device-width: 390px) and (orientation: landscape) {
#carousel {
min-width: 513px;
min-height: 385px;
}
}
This does what I want on iOS Safari. Unfortunately, it also applies to iOS Chrome, which has a different, smaller effective screen height. I haven't figured out an even remotely elegant solution to target iOS Safari without targeting iOS Chrome.
I've been stuck on the following problem for a while now.
#media screen and (min-width: 414px) and (max-width: 600px) {
/* appropriate code */
}
#media screen and (min-width: 601px) and (max-width: 767px) {
/* appropriate code */
}
The issue I have is that when a screen is on the specific width of 767px, no styling is applied. What really confuses me is that on the other hand the specific width of 600px does work, while both are the max-width value of their respective media query. I have had this issue with other similar media queries but decided to simply provide you with those two to make my problem clear. I have tried out several things (verifying zoom value of browser, trying on different browser) but it doesn't seem to work. At first I thought it might be a bug but it's a recuring problem. Do any of you have an idea as to what might be the problem?
It's working correctly on my side. But for more accuracy, you can use decimal values like so.
/* 414 -> 413.7 600 -> 600.3 */
#media screen and (min-width: 413.7px) and (max-width: 600.3px) {
div {
color: red;
}
}
/* 601 -> 600.7 767 -> 767.3 */
#media screen and (min-width: 600.7px) and (max-width: 767.3px) {
div {
color: blue;
}
}
<div>Hello</div>
When min-width is used, it means the lowest width and styles are set for the higher width
When max-width is used, it means the maximum width and styles are set for the width less than that
When both are used, styles are applied when the width between the values is entered
I want to fix an issue on my homepage, whereby the first image in main top carousel does not display all the content when the screen width is between 1280px and 1700px (the left texts in blue). By using css "zoom" on <section class="rotator-section"> and setting it to 80%: #media screen and (min-width: 1280px) and (max-width: 1765px){ .rotator-section {zoom:80%;}} this mostly fixes the issue between certain widths. Unfortunately, zoom does not work at all in Firefox and produces unwanted results in IE (image stays same unwanted size and rest of window shows white space).
In order, at least, to apply a good fix to Chrome, Opera, Edge and not create unwanted results in IE, I want to apply the following #media not query so that IE 10 & 11 do not apply this css:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.rotator-section {zoom:100% !important;}
}
This is not a perfect solution. As many of my website visitors use IE11, 10 & 9 & Firefox.
What is the solution for these browsers?
There is an easier way to fix this. The positioning of the background image is being caused by one bit of CSS:
#homepage-rotator>div:nth-child(2) {
background-position: right;
}
This is forcing that image to be misaligned. Try deleting that CSS, or changing it:
#homepage-rotator>div:nth-child(2) {
background-position: left;
}
I suggest you to use different images according to screen size may help you display the image properly.
Example:
/* For devices smaller than 1200px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For devices 1200px and larger: */
#media only screen and (min-device-width: 1200px) {
body {
background-image: url('img_flowers.jpg');
}
}
Please help me with this...
Given this css:
/* General css */
.my_element {
height:50px !important;
}
/* Webkit-only css */
#media screen and (-webkit-min-device-pixel-ratio:0) {
.my_element {
height:100px !important;
}
}
/* Ipad specific css */
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
.my_element {
height:200px !important;
}
}
Notice that height has the !important attribute in all cases.
Question: Will my_element have a height of 100px when viewed in webkit browsers? Will it be 200px when viewed on an Ipad? Or will it be 50 px on all devices and browsers?
As all three styles have !important it won't make any difference between them. That will only affect their precedence compared to other styles that doesn't have !important.
For rules with the same specificity (same number of id, class and element selectors), the rules that come last will take precedence. That means that the webkit and iPad specific rules will take precedence when they are used.
If there is multiple styles with !important, the last one applied will be the one active on the element. And styles from single sheet apply in the order they are written.
So in your case, the height will have the last value applied. So 50px or 100px or 200px (depending which media query is active for aprticular browser).
I would say that the height will vary depending on whether you're on an iPad or in a webkit browser.
Edited for clarity: what I meant is that it won't be 50px on all devices but 200px on iPad and 100px in webkit browsers.
Fairly newbie question, I'm currently using the 320andup template by Any Clarke to make a responsive website.
All is going well except for quite a few CSS rules that don't seem to be picked up by the browser upon looking at the inspect element from 736px media query on and upwards, it still just picks up the rules from base level(320 mobile) and/or the 480 and 600 px specified widths.
No issues in Firefox, only in chrome. (the seemingly ignored attributes in chrome are commented below) I daren't check IE just yet, anyone have any answers / big fixes for this please?
e.g,
base level (320px)
.content { clear: both;margin: 10px auto;width: 92%;}
ul.social li{text-align:right;list-style:none;}
#media only screen and (min-width: 480px) {
ul.social li{text-align:right;list-style:none;}
.content {clear: both;margin: 100px auto;width: 92%;}
}
#media only screen and (min-width: 992px) {
ul.social li{ text-align:right; list-style:none; /*this ignored --> */display:inline;}
.content{ clear:both; /*this ignored --> */ margin-left:200px;}
}
the core 320andup file found here for details: https://github.com/malarkey/320andup/blob/master/css/320andup.css
This line:
#media only screen and (min-width: 992px)
means the screen needs to be a minimum width of 992px before the code is initiated. So the fact that 736px is not showing those does not surprise me (it does surprise me if FF was showing it, as you imply). This is because it should not engage those styles until the browser window is 992px wide (736px is too narrow). See example.
If you want them engaged earlier, then change the number (something like):
#media only screen and (min-width: 730px)