How do I configure a media query that triggers when the screen size is less than

ID: 3667196 • Letter: H

Question

How do I configure a media query that triggers when the screen size is less than 600 pixels? My code looks the exact same as the picture except I do not know how to add a media query properly so my page condenses like the pages from the pictures I included.

Here is my HTML5 code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.container {
width: 100%;
}

p {
   color: #000000;
   font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif
}
h1 {
   color: #FF0000;
   font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif
}

a {
   color: #00FFFF;
   font: bold;
}
.part1 {
   margin: 1%;
   float: left;
   width: 30%;
   border: thin solid #000000;
}
.part2 {
   margin: 1%;
   float: left;
   width: 30%;
   border: thin solid #000000;

}
.part3 {
   color: #FEFEFE;
   background-color: #0066FF;
   margin: 1%;
   clear: both;
   width: 300px;
   border: thin solid #000000;
}
#part4 {
   color: #7900FF;
   background-color: #FF0000;
   width: 50%;
}
</style>
</head>

<body>
<div class="container">
<div class="part1">
<p>Part1</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Paragraph</p>
<a href="www.SDSU.edu"> School Website </a></div>
<div class="part2">
<p>Part 2</p>
<h1> Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<p> Paragraph </p>
<a href="about.html">Click here to learn about Your Name
</a></div>
<div class="part3">
<p>Part 3</p>
<h1> Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<p>Paragraph</p>
<div id="part4">
<h2> Heading 2 </h2>
Extra Text
<p>Paragraph</p>
</div>

</div>

</div>
</body>
</html>

Homework 01 Heading 1 Heading 1 Heading 2 Heading 2 Heading 3 Heading 3 art 3 Heading 2 Figure 2: Partial preview of index.html (wider than 600px) file:/Users a2015Charlie/Droi C >> Gmall MTSUApple ESPN Y FB FPal TP W Buf Clnss Videos Web Homework 01 art 1 Heading 1 Heading 2 Heading 3 o to MTSU's website Heading 1 Heading2 Heading 3

Explanation / Answer

Please comment if u have any queries.

=============================================

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.container {
width: 100%;
}
p {
color: #000000;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif
}
h1 {
color: #FF0000;
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif
}
a {
color: #00FFFF;
font: bold;
}
.part1 {
margin: 1%;
float: left;
width: 30%;
border: thin solid #000000;
}
.part2 {
margin: 1%;
float: left;
width: 30%;
border: thin solid #000000;

}
.part3 {
color: #FEFEFE;
background-color: #0066FF;
margin: 1%;
clear: both;
width: 300px;
border: thin solid #000000;
}
#part4 {
color: #7900FF;
background-color: #FF0000;
width: 50%;
}

@media screen and (min-width: 600px) {
body {
background-color: lightgreen;
}
}

</style>
</head>
<body>
<div class="container">
<div class="part1">
<p>Part1</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Paragraph</p>
<a href="www.SDSU.edu"> School Website </a></div>
<div class="part2">
<p>Part 2</p>
<h1> Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<p> Paragraph </p>
<a href="about.html">Click here to learn about Your Name
</a></div>
<div class="part3">
<p>Part 3</p>
<h1> Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<p>Paragraph</p>
<div id="part4">
<h2> Heading 2 </h2>
Extra Text
<p>Paragraph</p>
</div>

</div>

</div>
</body>
</html>

Navigate

How do I compute the errors? Th eamount of cadmium in a sample was determined us

How do I construct a post-closing trial balance with these figures? What changes

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

How do I configure a media query that triggers when the screen size is less than

Question

Explanation / Answer

Related Questions

Navigate