Text inside image isn't responsive

148 views Asked by At

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;
}
3

There are 3 answers

0
Sonal Nagwekar On BEST ANSWER

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.

0
S.s. On

Share a screenshot of the issue

Anyway, you can use
font-size: CSS;

CSS can be:
100%, 100vw, x% or xvw (x is a number) to make it responsive

Also don't forget about
<meta name="viewport" content="width=device-width, initial-scale=1" /> in HTML

1
Prakash On

Add this below line inside head,

<meta name="viewport" content="width=device-width, initial-scale=1.0">