How can add at least one layout-based media query such that the physical position and layout of items changes in phone portrait mode and how to make my code more efficient?

Hello Everyone,

I have created a webpage and used CSS to handle media queries so when I view my webpage on a mobile emulator, it will become active when I reduce the width size of the screen and when the screen is turned to portrait form it will be become red. But how can add at least one layout-based media query such that the physical position and layout of items changes in phone portrait mode? I know what I have so far is right, but is there a way that I can combine the two media queries into one media query and do what I am asking to do? I have attached the code I have done so far in HTML, CSS, and JavaScript for anyone’s viewing.

<html> 
<head>
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" type="text/css" href="example-style.css">
</head>
<body>
<p id= "demo1"></p>
<p id= "demo2"></p>

<script src="script.js"></script>
</body>
</html>
@media screen and (max-width: 320px)
{
    #demo1{ width: 100px;} 
    #demo2{ width: 100px;}
}

@media only screen and (orientation: portrait) {
    body {
        background-color: red;
    }
}

var Person= {}; 

Person.Character= function(firstName, lastName, gender, age) 
{ 
    this.FirstName= firstName;
    this.LastName= lastName;
    this.Gender= gender; 
    this.Age= age;  
} 

Person.Character.prototype.GetAllInformation= function() 
{
      return this.FirstName + " " + this.LastName + " "  + this.Gender + " "  + 
       + this.Age;   
}

Person.Zack = new Person.Character("Zack", "Efron", "Male", 29); 
Person.Shia = new Person.Character("Shia", "Labeouf","Male", 30);  


document.getElementById("demo1").innerHTML = Person.Zack.GetAllInformation(); 

document.getElementById("demo2").innerHTML = Person.Shia.GetAllInformation(); 



This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.