I recently created a webpage for laptop view and attempted to use media queries to adjust the CSS styling to fit on iPad and mobile devices. However, when setting the width of the (.content) element to 100%, the content doesn't actually fill the entire width, leaving a relatively large margin. I also used position relative to adjust the position of form and paragraph elements in the initial laptop view - could this affect my media query? Any help or suggestions would be greatly appreciated as I need to submit this assignment by tomorrow! 😅 Thank you.
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: rgb(250, 250, 250);
}
.content {
max-width: 1400px;
margin: auto;
background: rgb(247, 246, 244);
padding: 10px;
}
... <!-- Truncated CSS code for brevity -->
@media screen and (max-width:915px) {
.content{
width: 100%;
}
.inner-body {
width: 100%;
}
}
@media screen and (max-width:415px) {
.content{
width: 100%;
}
.inner-body {
width: 100%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="log-it-reports.css">
<script src="log-it-reports.js"></script>
<title>Document</title>
</head>
<body>
<div class= "content">
<div class="logo">
<img src="image/logo1.png" alt="Academy Logo" >
</div>
<div class="navi">
<p id="nav">
<a href="homepage.html" title=" Home Page"> Home</a> |
<a href="academics.html" title=" Academics Page">Academics</a> |
... <!-- Truncated HTML code for brevity -->
</navi>
</div>
<div class="inner-body">
<div class = "header" >
<h1>Steps For IT-Issues Logging:</h1>
</div>
<div class="para">
<p>Please read the following instructions before submitting a report:</p>
<ol>
<li>Fill out all of the fields.</li>
<li>Use a valid email.</li>
<li>Select a problem type.</li>
<li>Be as detailed as possible so that the IT staff could address the issue properly (100 characters minumum).</li>
<li>Normally most issues get addressed within 2 hours, please be patient.</li>
</ol>
</div>
... <!-- Truncated HTML form content for brevity -->
</div>
</body>
</html>