HTML: How to set element width to the smallest of either (a) the screen width or (b) some size in pixels?
I'd like to make an element 400 px wide, if that fits the screen, and otherwise just give it the full width of the screen.
So I don't want the element to overflow beyond the screen.
How do I do this actually?
I've tried setting max-width to 400px, that works partly but it doesn't (of course) set the initial size. If I also put width=100% on it I notice that as I make the window smaller at a certain point the item starts (slightly) overflowing off the screen - it doesn't do that with only max-width set.
html css
asked Nov 15 at 22:20
Otto
118110
add a comment |
I'd like to make an element 400 px wide, if that fits the screen, and otherwise just give it the full width of the screen.
So I don't want the element to overflow beyond the screen.
How do I do this actually?
I've tried setting max-width to 400px, that works partly but it doesn't (of course) set the initial size. If I also put width=100% on it I notice that as I make the window smaller at a certain point the item starts (slightly) overflowing off the screen - it doesn't do that with only max-width set.
html css
asked Nov 15 at 22:20
Otto
118110
are you wanting to set a max-width of an element to 400px and otherwise set it to 100% width? Can you show us your codes and samples of desire results? Your question is not very clear
– K.C.
Nov 15 at 22:24
add a comment |
I'd like to make an element 400 px wide, if that fits the screen, and otherwise just give it the full width of the screen.
So I don't want the element to overflow beyond the screen.
How do I do this actually?
I've tried setting max-width to 400px, that works partly but it doesn't (of course) set the initial size. If I also put width=100% on it I notice that as I make the window smaller at a certain point the item starts (slightly) overflowing off the screen - it doesn't do that with only max-width set.
html css
asked Nov 15 at 22:20
Otto
118110
I'd like to make an element 400 px wide, if that fits the screen, and otherwise just give it the full width of the screen.
So I don't want the element to overflow beyond the screen.
How do I do this actually?
I've tried setting max-width to 400px, that works partly but it doesn't (of course) set the initial size. If I also put width=100% on it I notice that as I make the window smaller at a certain point the item starts (slightly) overflowing off the screen - it doesn't do that with only max-width set.
html css
html css
asked Nov 15 at 22:20
Otto
118110
asked Nov 15 at 22:20
Otto
118110
edited Nov 16 at 6:48
asked Nov 15 at 22:20
Otto
118110
asked Nov 15 at 22:20
Otto
118110
asked Nov 15 at 22:20
Otto
118110
118110
are you wanting to set a max-width of an element to 400px and otherwise set it to 100% width? Can you show us your codes and samples of desire results? Your question is not very clear
– K.C.
Nov 15 at 22:24
add a comment |
are you wanting to set a max-width of an element to 400px and otherwise set it to 100% width? Can you show us your codes and samples of desire results? Your question is not very clear
– K.C.
Nov 15 at 22:24
are you wanting to set a max-width of an element to 400px and otherwise set it to 100% width? Can you show us your codes and samples of desire results? Your question is not very clear
– K.C.
Nov 15 at 22:24
are you wanting to set a max-width of an element to 400px and otherwise set it to 100% width? Can you show us your codes and samples of desire results? Your question is not very clear
– K.C.
Nov 15 at 22:24
add a comment |
2 Answers
2
active
oldest
votes
To have a set width and a max width you can do the following:
element {
width: 100%;
max-width: 400px;
{
This will set the default width of your element to 100% of the elements parent, but will cap the width at 400px. One thing to take note of is that this will make the elements width 100% of the PARENT to your element. Not of the window.
answered Nov 15 at 22:43
Prismo
563
add a comment |
In this example, the flex items are set to evenly occupy the entirety of its parent's width. But, they will only go as far as 400px in a screen that fits 400px. Otherwise, they're as big as their parent will allow them.
#flex-container {
display: flex;
background-color: green;
height: 50vh;
justify-content: center;
align-items: center;
}
#flex-item-1 {
flex: 1 0 0;
background-color: red;
height: inherit;
max-width: 400px;
}
#flex-item-2 {
flex: 1 0 0;
background-color: orange;
height: inherit;
max-width: 400px;
}<div id="flex-container">
<div id="flex-item-1"></div>
<div id="flex-item-2"></div>
</div>Also, here's a working example
On the side note, check out this guide for flexbox :)
answered Nov 15 at 23:09
C.RaysOfTheSun
585127
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%2f53328693%2fhtml-how-to-set-element-width-to-the-smallest-of-either-a-the-screen-width-or%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
To have a set width and a max width you can do the following:
element {
width: 100%;
max-width: 400px;
{
This will set the default width of your element to 100% of the elements parent, but will cap the width at 400px. One thing to take note of is that this will make the elements width 100% of the PARENT to your element. Not of the window.
answered Nov 15 at 22:43
Prismo
563
add a comment |
To have a set width and a max width you can do the following:
element {
width: 100%;
max-width: 400px;
{
This will set the default width of your element to 100% of the elements parent, but will cap the width at 400px. One thing to take note of is that this will make the elements width 100% of the PARENT to your element. Not of the window.
answered Nov 15 at 22:43
Prismo
563
add a comment |
To have a set width and a max width you can do the following:
element {
width: 100%;
max-width: 400px;
{
This will set the default width of your element to 100% of the elements parent, but will cap the width at 400px. One thing to take note of is that this will make the elements width 100% of the PARENT to your element. Not of the window.
answered Nov 15 at 22:43
Prismo
563
To have a set width and a max width you can do the following:
element {
width: 100%;
max-width: 400px;
{
This will set the default width of your element to 100% of the elements parent, but will cap the width at 400px. One thing to take note of is that this will make the elements width 100% of the PARENT to your element. Not of the window.
answered Nov 15 at 22:43
Prismo
563
answered Nov 15 at 22:43
Prismo
563
answered Nov 15 at 22:43
Prismo
563
answered Nov 15 at 22:43
Prismo
563
563
add a comment |
add a comment |
In this example, the flex items are set to evenly occupy the entirety of its parent's width. But, they will only go as far as 400px in a screen that fits 400px. Otherwise, they're as big as their parent will allow them.
#flex-container {
display: flex;
background-color: green;
height: 50vh;
justify-content: center;
align-items: center;
}
#flex-item-1 {
flex: 1 0 0;
background-color: red;
height: inherit;
max-width: 400px;
}
#flex-item-2 {
flex: 1 0 0;
background-color: orange;
height: inherit;
max-width: 400px;
}<div id="flex-container">
<div id="flex-item-1"></div>
<div id="flex-item-2"></div>
</div>Also, here's a working example
On the side note, check out this guide for flexbox :)
answered Nov 15 at 23:09
C.RaysOfTheSun
585127
add a comment |
In this example, the flex items are set to evenly occupy the entirety of its parent's width. But, they will only go as far as 400px in a screen that fits 400px. Otherwise, they're as big as their parent will allow them.
#flex-container {
display: flex;
background-color: green;
height: 50vh;
justify-content: center;
align-items: center;
}
#flex-item-1 {
flex: 1 0 0;
background-color: red;
height: inherit;
max-width: 400px;
}
#flex-item-2 {
flex: 1 0 0;
background-color: orange;
height: inherit;
max-width: 400px;
}<div id="flex-container">
<div id="flex-item-1"></div>
<div id="flex-item-2"></div>
</div>Also, here's a working example
On the side note, check out this guide for flexbox :)
answered Nov 15 at 23:09
C.RaysOfTheSun
585127
add a comment |
In this example, the flex items are set to evenly occupy the entirety of its parent's width. But, they will only go as far as 400px in a screen that fits 400px. Otherwise, they're as big as their parent will allow them.
#flex-container {
display: flex;
background-color: green;
height: 50vh;
justify-content: center;
align-items: center;
}
#flex-item-1 {
flex: 1 0 0;
background-color: red;
height: inherit;
max-width: 400px;
}
#flex-item-2 {
flex: 1 0 0;
background-color: orange;
height: inherit;
max-width: 400px;
}<div id="flex-container">
<div id="flex-item-1"></div>
<div id="flex-item-2"></div>
</div>Also, here's a working example
On the side note, check out this guide for flexbox :)
answered Nov 15 at 23:09
C.RaysOfTheSun
585127
In this example, the flex items are set to evenly occupy the entirety of its parent's width. But, they will only go as far as 400px in a screen that fits 400px. Otherwise, they're as big as their parent will allow them.
#flex-container {
display: flex;
background-color: green;
height: 50vh;
justify-content: center;
align-items: center;
}
#flex-item-1 {
flex: 1 0 0;
background-color: red;
height: inherit;
max-width: 400px;
}
#flex-item-2 {
flex: 1 0 0;
background-color: orange;
height: inherit;
max-width: 400px;
}<div id="flex-container">
<div id="flex-item-1"></div>
<div id="flex-item-2"></div>
</div>Also, here's a working example
On the side note, check out this guide for flexbox :)
#flex-container {
display: flex;
background-color: green;
height: 50vh;
justify-content: center;
align-items: center;
}
#flex-item-1 {
flex: 1 0 0;
background-color: red;
height: inherit;
max-width: 400px;
}
#flex-item-2 {
flex: 1 0 0;
background-color: orange;
height: inherit;
max-width: 400px;
}<div id="flex-container">
<div id="flex-item-1"></div>
<div id="flex-item-2"></div>
</div>#flex-container {
display: flex;
background-color: green;
height: 50vh;
justify-content: center;
align-items: center;
}
#flex-item-1 {
flex: 1 0 0;
background-color: red;
height: inherit;
max-width: 400px;
}
#flex-item-2 {
flex: 1 0 0;
background-color: orange;
height: inherit;
max-width: 400px;
}<div id="flex-container">
<div id="flex-item-1"></div>
<div id="flex-item-2"></div>
</div>answered Nov 15 at 23:09
C.RaysOfTheSun
585127
edited Nov 15 at 23:22
answered Nov 15 at 23:09
C.RaysOfTheSun
585127
answered Nov 15 at 23:09
C.RaysOfTheSun
585127
answered Nov 15 at 23:09
C.RaysOfTheSun
585127
585127
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53328693%2fhtml-how-to-set-element-width-to-the-smallest-of-either-a-the-screen-width-or%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
are you wanting to set a max-width of an element to 400px and otherwise set it to 100% width? Can you show us your codes and samples of desire results? Your question is not very clear
– K.C.
Nov 15 at 22:24