iPhone in portrait mode stays resolutely red

Report · Dec 26, 2019

my site changes background colour as i reduce the viewport by using media queries in file v40.css I just use these colour changes to help me learn to use the media queries and to confirm they are working

All seems ok on Desktop and iPhone landscape mode(yellow)

But the iPhone in portrait mode stays resolutely red when, according to my media query(at line 46), it should turn blue. Can anyone say why it is ignoring my rule?

the page whose background colour should turn blue is at

http://v40.ancestry.higgsy.co.uk/higgs_harry_my_dad.php
many thanks
David

Report · Dec 26, 2019

I think this is what you're tyring to do. I start with xs mobile as the default and work my way up to the larger devices.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Media Queries</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/**Default Rules for all, xs first**/
body {
margin: 0 auto;
width: 80%;
font-family: 
Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
font-size: calc(16px + 1vw);
line-height: calc(1.1em + 0.5vw);
color:#555;
background:white;
}

/* Special Rules for sm */
@media only screen and (min-width: 576px) {
body {background: red; color:white}
}	  
/* Special Rules for md */
@media only screen and (min-width: 768px) {
body {background:blue;}
}
/* Special Rules for lg */
@media only screen and (min-width: 992px) {
body {background:goldenrod;}
}
/* Special Rules for xlg */
@media only screen and (min-width:1200px) {
body {background:green;}
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus laboriosam voluptates recusandae quibusdam repudiandae provident expedita voluptatibus, blanditiis doloribus ratione iusto consequatur dicta repellendus maxime cvm, aliquid perferendis magna.</p>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Dec 27, 2019

many thanks Nancy, that's fixed my main issue. But, one question please: On the phone in landscape we correctly see the red background but when rotated to portrait the background is white which is not a colour from your media queries, is this some default or is it specified somewhere in the code, maybe bootstrap is doing it? If possible I'd like to be able to change that colour too, thanks

Report · Dec 26, 2019

Does youn iPhone comply with the following?

(-webkit-min-device-pixel-ratio: 2)

Wappler, the only real Dreamweaver alternative.

Report · Dec 27, 2019

I think so Ben, it is an iPhone 6 Plus and this website suggests it does comply. I have since implemented the code Nancy kindly provided and it all now works fine, Thanks to you both, David

my phone

Adobe Community

iPhone in portrait mode stays resolutely red

1 Correct answer