While I have a good grasp of the concepts behind responsive design and @media queries, I'm facing an issue with a project that consists of very basic HTML. The project includes:
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>RegEx Profanity Filter</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p>Insert profanity laced rant here:</p>
<textarea rows="4" cols="50">
</textarea>
<input type="button" value="Click me" onclick="check()">
<div id = "filtered"></div>
</body>
On my laptop, the content in the Regex Profanity filter occupies approximately one-third of the screen width, appearing well. However, when accessing it on my iPhone through Safari, this remains unchanged, resulting in everything appearing minuscule.
I attempted enclosing all elements in the initial project within a div named "everything" and specifying its width as 100% for screens less than or equal to 900px. Regrettably, this approach did not yield the desired outcome.
How can I effectively resolve this issue?