I'm making a small webpage, my problem is that the text inside the image isn't responsive for all devices, so can anyone help me make that text responsive, here are my codes:
<html>
<head>
<title>resturant</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="main.css">
<script src="script.js"></script>
</head>
<body>
<div id="w3-display-container w3-mobile" id="main">
<img src="headerimg.jpg" class="w3-image w3-mobile">
<div class="w3-display-topleft w3-mobile" id="title"><br /><p>Welcome to <strong>JS</strong> resturant</p></div>
<p class="w3-display-left w3-mobile" id="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque at enim voluptatibus, veniam omnis quaerat cumque deleniti repellat tempore rem sapiente temporibus consectetur illum praesentium eius, expedita totam? Earum, quos?</p>
</div>
</body>
</html>
and here's my CSS styles
#title {
color: rgb(255, 237, 75);
font-size: 40px;
font-weight: bold;
padding-left: 30px;
}
#title strong {
color: brown;
}
#description {
max-width: 40%;
padding-left: 40px;
font-size: 20px;
font-weight: bold;
}
You should include the following viewport element in all your web pages:
A viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.