Could you please tell me why div not taking a width of 90% of total width? When I write like that
width: 90%;
margin: 0 auto;
it takes the width, but when I write like this it doesn't
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
here is my code
https://codesandbox.io/s/bitter-dawn-o6rx2
const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: "90%";
/* // width: 90%;
margin: 0 auto; */
`;
how to center form vertically and horizontally
You are doing everything correct except a single line:
Change this line
width: "90%";
to this one
width: 90%;
So your final CSS will be
const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 90%;
margin: 0 auto; */
`;
The CSS of your styled Wrapper component should be like the example below. Notice that in your example you have double quotes around 90% which is an invalid CSS value. It has to be 90% without double quotes since styled components use regular CSS syntax.
const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 90%; //<=== here
margin: 0 auto;
`;
and you will need to give your form 100% width if you want it to use 100% of the wrapper
const StyledForm = styled.form`
width: 100%;
`
You need to change width: "90%"; to width: 90%;
.testingWidth{
display:flex;
flex-basis:100%;
width:90%;
max-width:90%;
min-width:90%;
margin:0 auto;
background-color:#CCAACC;
min-height:10vh;
padding:0.125em;
}
<div class="testingWidth">
styling with class.
</div>
<div style="display:flex;flex-basis:100%;width:90%;max-width:90%;min-width:90%;margin:0 auto;background-color:#CCC;min-height:10vh;padding:0.125em;">
styling without class.
<p>Do add flex-basis to your styling and check again.</p>
</div>
Related
I'm new, and I want to learn how can I create these images to be in the center of the page and I want to be a very small gap between them? May you please help me? I was searching on the internet about how can I create this, but unfortunately I wasn't very lucky. What's the code for this container, row, or column?
Image
Is this what you want? You wrap the two images inside a div container and apply flex property to it. Then use a padding of 5px on each image to get that little space between. Also I have used a custom height to the container, you can adjust it according to your need.
.container {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
.container > div {
padding: 0px 5px;
max-width: 90%;
height: 325px;
}
.container div img {
width: 100%;
height: 100%;
object-fit: cover;
}
#media screen and (max-width: 780px) {
.container {
flex-direction: column;
}
.container > div {
padding: 10px 5px;
}
}
<div class="container">
<div><img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ"/></div>
<div><img src="https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68"/></div>
</div>
I've been trying to find a way to position my image and "anchor" it so that it stays on that position no matter the screen size
The image is currently in a div as below:
.titleContainer{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
The background(red and yellow) is outside of the titleContainer as below:
.rightBackground{
width: 70%;
height: 100%;
position: absolute;
background-color: var(--red-color);
left: 30%;
z-index: -1;
}
and there is also a left version as well.
The image/title is setup as:
.titleLogo{
width: auto;
height: auto;
max-width: 300px;
max-height: 150px;
margin-left: 20%;
This obviously doesn't work as when I resize my screen, I get something like this
Does anyone know tricks to get my image to anchor on the red/yellow line?
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
I'm trying to flex the img and .title elements within a flex-column. When the page is resized the image should grow/shrink while maintaining its aspect ratio and the title text should remain the same height at the bottom of the screen. However, when I reduce the screen height the title text is pushed off the screen.
Also, the height of the .title element may not always be a single line, will not be known prior to rendering.
Code: https://jsfiddle.net/qk4wbfpe/
body {
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.container > img {
flex-grow: 1;
flex-shrink: 1;
background-color: blue;
width: 100%;
height: 100%;
object-fit: contain;
}
.container .title {
padding: 10px;
color: white;
text-align: center;
background-color: gray;
}
<div class="container">
<img src="https://cdn.mos.cms.futurecdn.net/paWPwF85Vkcs8YUuyvA3YM-650-80.jpg.webp">
<div class="title">
Planet Earth
</div>
</div>
If you add min-height:0 to .container>img it will give the desired result.
body {
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.container>img {
flex-grow: 1;
flex-shrink: 1;
background-color: blue;
width: 100%;
min-height:0;
object-fit: contain;
}
.container .title {
padding: 10px;
color: white;
text-align: center;
background-color: gray;
}
<div class="container">
<img src="https://cdn.mos.cms.futurecdn.net/paWPwF85Vkcs8YUuyvA3YM-650-80.jpg.webp">
<div class="title">
Planet Earth
</div>
</div>
add a wrap to your container to make it flow nicely
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 100%;
height: 100%;
and add a flex-basis on your child (img)
.container > img {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 25%;
background-color: blue;
object-fit: contain;
or you can remove the flex-grow, shrink and shorthand it to
flex: 1 1 25%;
is that what you needed?
I'm working to create a TextArea that is horizontally and vertically centered in the page. Given that I need the TextArea to be vertically centered, I can't have the textarea be 100w and 100h, I need it to start with a small height and then grow as the user types. I also need a click capturer so if the user clicks the area surrounding the textarea, the textarea focuses. (the gray bkg is just for debugging purposes)
I have a demo on CodePen here: https://codepen.io/anon/pen/OQbvxa
autosize(document.getElementById("note"));
$( ".textAreaClickCapturer" ).mouseup(function() {
$( "#note" ).focus();
});
html, body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.page-body.fullScreen {
display: flex;
flex: 1 1;
flex-direction: column;
height: 100%;
width: 100%;
background: #EFEFEF;
text-align: left;
padding: 0!important;
align-items: normal;
justify-content: normal;
}
form {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
form .textAreaClickCapturer {
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
align-items: center
}
form .field {
width: 100%;
margin: 0;
padding: 24px;
clear: both;
max-height: max-content;
height: 100%;
align-items: center;
}
textarea {
border: none;
border-radius: 0;
font-size: 21px;
line-height: 28px;
padding: 0;
vertical-align: top;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<div class="page-body fullScreen ">
<form action="/">
<div class="textAreaClickCapturer" role="presentation">
<div class="field">
<textarea id="note" placeholder="Say something..." rows="3"></textarea>
</div>
</div>
</form>
</div>
When you type in multiple lines, the TextArea does grow nicely but eventually, the TextArea grows pasts the size of the screen causing it to break.
How can I get the TextArea are to grow where the TextArea doesn't go behind the page and break but has a working overflow to handle lots of text?
Desired Initial Experience
Broken UI, when the textarea grows past the surrounding div.
Thank you!
The main reason is that when using align-items: center and/or justify-content: center, the element overflow its parent both at, in this case, top/bottom.
To solve that, one need to use auto margin's instead, and with that be able to control the alignment both vertical and horizontal, top/bottom, left/right, etc.
You also had a lot of height: 100% in your code (which I cleaned up), and combined with Flexbox, that cause more issues, so instead use Flexbox's own properties, e.g. here flex: 1 on flex column items, that will fill the parent's height.
Also added min-height: 0 so Firefox play along.
Updated codepen
Stack snippet
autosize(document.getElementById("note"));
$( ".textAreaClickCapturer" ).mouseup(function() {
$( "#note" ).focus();
});
html,
body {
margin: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.page-body.fullScreen {
flex: 1;
display: flex;
flex-direction: column;
background: #efefef;
min-height: 0;
}
form {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
form .textAreaClickCapturer {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
form .field {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
padding: 24px;
}
textarea {
border: none;
border-radius: 0;
font-size: 21px;
padding: 0;
width: 90%;
text-align: center;
overflow: auto;
margin: auto;
}
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-body fullScreen ">
<form action="/">
<div class="textAreaClickCapturer" role="presentation">
<div class="field">
<textarea id="note" placeholder="Say something..." rows="3"></textarea>
</div>
</div>
</form>
</div>
I think you can use max-width and max-height:
textarea {
...
max-width: 100%;
max-height: 100%;
}
Update
I simplified both HTML and CSS, snippet:
autosize(document.getElementById("note"));
$(".textAreaClickCapturer").mouseup(function() {
$("#note").focus();
});
html, body, form {
height: 100%;
}
body {
background: #efefef;
margin: 0;
}
form {
display: flex;
align-items: center; /*center vertically*/
padding: 24px;
box-sizing: border-box;
}
textarea {
font-size: 20px;
text-align: center;
width: 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<form class="textAreaClickCapturer" action="/">
<textarea id="note" placeholder="Say something..." rows="3"></textarea>
</form>
I tried the following in your pen:
In the textarea selector in CSS, add:
max-height: 90%;
overflow: auto;
This gives you a scrollbar if the content entered exceeds the max height, and the max-height is controlled by the containing div's size.
Add a max height, like the others have said, me personally I prefer to use vh when relating to height in your situation. So in your pen it would just be:
textarea {
border: none;
border-radius: 0;
font-size: 21px;
line-height: 28px;
padding: 0;
vertical-align: top;
width: 100%;
text-align: center;
max-height:50vh;
}
and you're squared away. Your vertical overflow is scrolling by default so there really isn't any more you have to do.
I'm using Phillip Walton's 'solved-by-flexbox' sticky footer solution for my site.
In addition to this, I have some video pages on which I want to centre the video embed (video-container) in the viewport (both horizontally and vertically)
Below is everything as it is set-up, and Here's a JSFiddle just for good measure.
.Site {
display: flex;
flex-direction: column;
height: 100vh;
/* 1, 3 */
}
.Site-content {
flex: 1 0 auto;
/* 2 */
padding: var(--space) var(--space) 0;
width: 100vw;
}
.Site-header,
.Site-footer {
flex: none;
/* 2 */
}
.Site-header {
position: absolute;
top: 0;
z-index: 600;
flex: none;
}
.video-container {
position: relative;
width: 70vw;
height: calc(70vw * 9 / 16);
margin-left: auto;
margin-right: auto;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<body class="Site">
<div class="Site-header">This is a header</div>
<div class="Site-content">
<div class="video-container">
<iframe src="https://player.vimeo.com/video/100978843" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<div class="Site-footer">This is the footer</div>
</body>
I've seen a few different options, but most of them rely on knowing the exact size of the div or object to be centred.
For example, this option:
.video-container
{
width: 70vw;
height: calc(70vw * 9 / 16);
margin:0 auto;
background:#f7f7f7;
position:absolute;
left:50%;
top:50%;
}
Doesn't work, my video-container element still sits at the top of the page.
I've seen another code example which uses Flexbox to centre:
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
but this a no-go for me as it interferes with not only my sticky footer set-up but also the rest of the site content (for obvious reasons).
Is there another way to do this?
edit: I'm not sure why I'm receiving down votes. I've tried to explain the scenario with steps I have taken, and I've now provided full and complete code in both a JS Fiddle and a Stack Snippet. If there is anything else or my question is not clear then please, by all means let me know and I can edit the question.
SO36651747
Centring video in viewport within a sticky footer layout
Changed every style except the iframe. Got rid of the CSS variables (they had no ::root so they were useless). Made .Site-content a flex container because flex containers only affect their children. The elements you wanted to center were the grand-children of .Site, therefore it could not control the centering of the video-container.
Changed the style of the video container so that it's height and width maintains a 9:16 aspect ratio.
See references below.
Changes are marked with 🖉
The red borders are there to show the distance between the header/footer/video.
PLUNKER
README.md
.Site {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden; 🖉
align-items: center; 🖉
align-content: center; 🖉
}
.Site-content {
flex: 1 0 auto;
width: 100vw;
display: flex; 🖉
flex-flow: column nowrap; 🖉
justify-content: center; 🖉
align-items: center; 🖉
}
.Site-header,
.Site-footer {
flex: none;
position: absolute;
z-index: 600;
height: 10vh; 🖉
width: 100vw; 🖉
}
.Site-header {
top: 0;
border-bottom: 1px solid red; 🖉
}
.Site-footer {
bottom: 0; 🖉
border-top: 1px solid red; 🖉
}
.video-container {
position: relative;
width: 100%; 🖉
height: 0; 🖉
padding-bottom: 56.25%; 🖉
margin-left: auto;
margin-right: auto;
}
References:
Flexbox - align-items
Responsive Video