Highlighted

iPhone in portrait mode stays resolutely red

Participant ,
Dec 26, 2019

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy_OShea | Adobe Community Professional

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>

 

 

 

Topics

Code

Views

597

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

iPhone in portrait mode stays resolutely red

Participant ,
Dec 26, 2019

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy_OShea | Adobe Community Professional

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>

 

 

 

Topics

Code

Views

598

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 26, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
higgsyd LATEST
Participant ,
Dec 27, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Dec 26, 2019

Copy link to clipboard

Copied

Does youn iPhone comply with the following?

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

Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
Dec 27, 2019

Copy link to clipboard

Copied

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 phonemy phone

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...