Text inside image isn't responsive
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;
}
javascript html css
edited Jan 19 at 11:06
Hp_issei
41228
add a comment |
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;
}
javascript html css
edited Jan 19 at 11:06
Hp_issei
41228
By responsive, are you talking about the font-size or the alignment of the text on the image?
– AndrewL64
Jan 19 at 9:25
Try to share a screenshot of your issue...
– keul
Jan 19 at 9:31
add a comment |
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;
}
javascript html css
edited Jan 19 at 11:06
Hp_issei
41228
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;
}
javascript html css
javascript html css
edited Jan 19 at 11:06
Hp_issei
41228
edited Jan 19 at 11:06
Hp_issei
41228
edited Jan 19 at 11:06
Hp_issei
41228
edited Jan 19 at 11:06
Hp_issei
41228
edited Jan 19 at 11:06
Hp_issei
41228
41228
asked Jan 19 at 9:21
user10932453
By responsive, are you talking about the font-size or the alignment of the text on the image?
– AndrewL64
Jan 19 at 9:25
Try to share a screenshot of your issue...
– keul
Jan 19 at 9:31
add a comment |
By responsive, are you talking about the font-size or the alignment of the text on the image?
– AndrewL64
Jan 19 at 9:25
Try to share a screenshot of your issue...
– keul
Jan 19 at 9:31
By responsive, are you talking about the font-size or the alignment of the text on the image?
– AndrewL64
Jan 19 at 9:25
By responsive, are you talking about the font-size or the alignment of the text on the image?
– AndrewL64
Jan 19 at 9:25
Try to share a screenshot of your issue...
– keul
Jan 19 at 9:31
Try to share a screenshot of your issue...
– keul
Jan 19 at 9:31
add a comment |
3 Answers
3
active
oldest
votes
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.
answered Jan 19 at 12:03
Sonal NagwekarSonal Nagwekar
161
add a comment |
Share a screenshot of the issue
Anyway, you can usefont-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
answered Jan 19 at 10:15
S.s.S.s.
34
I tried this but it doesn't work
– user10932453
Jan 19 at 13:56
add a comment |
Add this below line inside head,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
edited Jan 19 at 10:48
Zoe
11.6k74379
answered Jan 19 at 10:33
PrakashPrakash
111
When you add code, but ESPECIALLY XML or HTML, you need to format it as code. See this for more info if you don't know how
– Zoe
Jan 19 at 10:49
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54265652%2ftext-inside-image-isnt-responsive%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Jan 19 at 12:03
Sonal NagwekarSonal Nagwekar
161
add a comment |
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.
answered Jan 19 at 12:03
Sonal NagwekarSonal Nagwekar
161
add a comment |
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.
answered Jan 19 at 12:03
Sonal NagwekarSonal Nagwekar
161
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.
answered Jan 19 at 12:03
Sonal NagwekarSonal Nagwekar
161
answered Jan 19 at 12:03
Sonal NagwekarSonal Nagwekar
161
answered Jan 19 at 12:03
Sonal NagwekarSonal Nagwekar
161
answered Jan 19 at 12:03
Sonal NagwekarSonal Nagwekar
161
161
add a comment |
add a comment |
Share a screenshot of the issue
Anyway, you can usefont-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
answered Jan 19 at 10:15
S.s.S.s.
34
I tried this but it doesn't work
– user10932453
Jan 19 at 13:56
add a comment |
Share a screenshot of the issue
Anyway, you can usefont-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
answered Jan 19 at 10:15
S.s.S.s.
34
I tried this but it doesn't work
– user10932453
Jan 19 at 13:56
add a comment |
Share a screenshot of the issue
Anyway, you can usefont-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
answered Jan 19 at 10:15
S.s.S.s.
34
Share a screenshot of the issue
Anyway, you can usefont-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
answered Jan 19 at 10:15
S.s.S.s.
34
edited Jan 19 at 10:35
answered Jan 19 at 10:15
S.s.S.s.
34
answered Jan 19 at 10:15
S.s.S.s.
34
answered Jan 19 at 10:15
S.s.S.s.
34
34
I tried this but it doesn't work
– user10932453
Jan 19 at 13:56
add a comment |
I tried this but it doesn't work
– user10932453
Jan 19 at 13:56
I tried this but it doesn't work
– user10932453
Jan 19 at 13:56
I tried this but it doesn't work
– user10932453
Jan 19 at 13:56
add a comment |
Add this below line inside head,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
edited Jan 19 at 10:48
Zoe
11.6k74379
answered Jan 19 at 10:33
PrakashPrakash
111
When you add code, but ESPECIALLY XML or HTML, you need to format it as code. See this for more info if you don't know how
– Zoe
Jan 19 at 10:49
add a comment |
Add this below line inside head,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
edited Jan 19 at 10:48
Zoe
11.6k74379
answered Jan 19 at 10:33
PrakashPrakash
111
When you add code, but ESPECIALLY XML or HTML, you need to format it as code. See this for more info if you don't know how
– Zoe
Jan 19 at 10:49
add a comment |
Add this below line inside head,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
edited Jan 19 at 10:48
Zoe
11.6k74379
answered Jan 19 at 10:33
PrakashPrakash
111
Add this below line inside head,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
edited Jan 19 at 10:48
Zoe
11.6k74379
answered Jan 19 at 10:33
PrakashPrakash
111
edited Jan 19 at 10:48
Zoe
11.6k74379
edited Jan 19 at 10:48
Zoe
11.6k74379
edited Jan 19 at 10:48
Zoe
11.6k74379
11.6k74379
answered Jan 19 at 10:33
PrakashPrakash
111
answered Jan 19 at 10:33
PrakashPrakash
111
answered Jan 19 at 10:33
PrakashPrakash
111
111
When you add code, but ESPECIALLY XML or HTML, you need to format it as code. See this for more info if you don't know how
– Zoe
Jan 19 at 10:49
add a comment |
When you add code, but ESPECIALLY XML or HTML, you need to format it as code. See this for more info if you don't know how
– Zoe
Jan 19 at 10:49
When you add code, but ESPECIALLY XML or HTML, you need to format it as code. See this for more info if you don't know how
– Zoe
Jan 19 at 10:49
When you add code, but ESPECIALLY XML or HTML, you need to format it as code. See this for more info if you don't know how
– Zoe
Jan 19 at 10:49
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54265652%2ftext-inside-image-isnt-responsive%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
By responsive, are you talking about the font-size or the alignment of the text on the image?
– AndrewL64
Jan 19 at 9:25
Try to share a screenshot of your issue...
– keul
Jan 19 at 9:31