div not aligning
The picture above is the issue, I want the div to align with the right side div. I was able to do it for my 3rd div and it looks like this. how I want alignment
Here is the sandbox to see: https://jsfiddle.net/drtripod/5uyre361/#&togetherjs=dwgrRImtgT
.wrapper {
min-height: calc(100vh - 80px);
display: grid;
grid-template-columns: 50% 50%;
border-radius: 10px;
overflow: hidden;
}
.form-wrapper.sign-up {
min-height: calc(100vh - 80px);
display: grid;
grid-template-columns: 50% 50%;
border-radius: 10px;
overflow: hidden;
}
.login-left {
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 150px;
background-color: white;
transition: 1s ease-in-out;
}
.sign-up {
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 150px;
background-color: white;
transition: 1s ease-in-out;
.login-right {
background-color: #eeeeee;
display: flex;
flex-direction: column;
}
}
I tried to add padding or change the width and height which did not end up working because when I resized the window it just lost its alignment
you just need to change "flex-direction: row;" property in the class ".login-form-footer" in your sandbox.
Related
I want the image and text to display on the same line, and have the image shrink and stay inline as the window shrinks.
Below is the CSS code. I want the image to shrink as the window shrinks.
.body1 {
display: flex;
flex-wrap: wrap;
background-color: #3803f6;
color: white;
align-items: center;
justify-content: space-between;
height: 500px;
padding: 0px;
margin: -10px;
position: relative;
height: 100%;
justify-content: flex-start;
}
.text {
display: flex;
display: block;
width: 300px;
height: 300px;
padding: 15px;
padding-left: 90px;
color: rgb(201, 212, 254);
}
.imgcontainer {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
padding-bottom: 50px;
background-color: aqua;
}
.img {
display: flex;
background-image: url('blue.jpeg');
padding: 100px;
position: relative;
background-size: cover;
}
Any suggestions would be nice
Give the img container a percentage width and the img element width=100%.
For example if you had 3 images on every line with 10px margin, set img container width to width: calc(100%/3 - 20px) and so on. Same goes with the text, it depends how many element you want on each line and then do the calculations accordingly.
I've been trying to get familiar with grid while making the sidebar, and I encountered the problem where my grid items/children aren't equal to each-other in height even though they're supposed to be the same size.
* {
margin: 0;
padding: 0;
}
.mainContainer {
height: 500px;
gap: 30px;
display: grid;
grid-row-template: repeat(auto-fill, 1fr);
background-color: black;
color: white;
justify-items: center;
align-items: start;
}
.mainContainer div {
display: grid;
align-content: center;
justify-content: center;
width: 60%;
border: 1px solid yellow;
height: 60%;
border-radius: 10px;
}
.mainContainer img {
height: 50%;
width: 100%;
object-fit: contain;
}
<div class="mainContainer">
<div> <img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg"> </div>
<div> Box 1 </div>
<div> Box 2 </div>
<div> Box 3 </div>
</div>
Focusing on the image
.mainContainer img{
height: 30px; // set it to any size
object-fit: contain;
}
I think you should use px instead of %
You can use this, it is done without grid, but with a flex-column.
* {
margin: 0;
padding: 0;
}
.mainContainer{
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
background-color: black;
color: white;
}
.mainContainer > * {
height: 25%;
width: 60%;
border: 1px solid yellow;
/* center image / text in children boxes */
display: flex;
justify-content: center;
align-items: center;
}
.mainContainer img {
object-fit: contain;
}
I created a layout using css and Flexbox, the issue is the footer div displays at the bottom of the page on load, but content shoots past it, so when you scroll the footer is just floating in the middle of the page. I'm not sure what to change.
I have changed the footer to be sticky, and bottom to be 0px. It kinda worked with adjusting the margin of the other divs, but its not very clean. I was hoping to keep using the flexbox attributes and just have them stack, but that doesn't seem to work? I've also adjusted the min-max heights of the other divs, but as soon as the window shrinks past the min height the footer just floats over the rest of the content.
Link to code JSFiddle
.footer{
height:40px;
display:flex;
align-items:center;
justify-content:center;
width:100%;
background-color:purple;
}
I would suspect that the footer would obey the stacking order and just display under the rest of the content, like the main body does under the header.
It's the height set on your '.content' class. Change height: calc(100vh - 100px) to min-height: calc(100vh - 100px)
Unless you want the footer and header always visible, then you can just add overflow: auto to make the content scroll
Remove height: calc(100vh - 100px); from .content class
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.bodywrap {
display: flex;
flex-wrap: wrap;
align-content: space-between;
background-color: black;
}
.header {
display: flex;
justify-content: space-between;
width: 100%;
height: 60px;
background-color: brown;
}
.hleft {
display: flex;
align-items: center;
justify-content: center;
width: 250px;
background-color: lightgreen;
}
.hmid {
display: flex;
align-items: center;
justify-content: center;
flex-grow:1;
font-size: calc(1.5vw);
background-color: orange;
}
.hright {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
background-color: pink;
}
.content {
display: flex;
justify-content: space-between;
background-color: darkblue;
}
.lmenu {
display: flex;
width: 250px;
flex-wrap: wrap;
align-content: space-between;
height: 100%;
min-height: 600px;
background-color: lightgrey;
overflow: hidden;
}
.ltop {
display: flex;
align-items: center;
justify-content: center;
height: 150px;
width: 100%;
background-color: blue;
}
.lmid {
height: 50px;
width: 100%;
background-color: green;
}
.lbot {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 100%;
background-color: yellow;
}
.rmaincont {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: calc(100vw - 250px);
background-color: grey;
}
.note {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
height: 50px;
}
.main {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
height: calc(100vh - 50px);
min-height: 550px;
width: 100%;
padding-left: 20px;
background-color: red;
}
.footer {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: purple;
}
<!DOCTYPE html>
<html>
<head>
<title>Mid-Valley Intranet</title>
<link rel="stylesheet" type="text/css" href="css/cstyle.css">
</head>
<body>
<div class="bodywrap">
<header class="header">
<div class="hleft">Left</div>
<div class="hmid">Mid</div>
<div class="hright">Right</div>
</header>
<div class="content">
<div class="lmenu">
<div class="ltop">
Top
</div>
<div class="lmid">
Mid
</div>
<div class="lbot">
Bot
</div>
</div>
<div class="rmaincont">
<div class="note">
Notice
</div>
<div class="main">
Main Content
</div>
</div>
</div>
<footer class="footer">
Footer Text
</footer>
</div>
</body>
</html>
There are a few things did to do to make this work:
Originally the scrolling was happening on the body. I added overflow: hidden on the body and overflow-y: auto to the div with the "bodywrap" class.
I added the position sticky and bottom 0, but with vendor prefixes:
bottom: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
I also made the div with class "bodywrap" have a height equal to 100vh minus the height of the footer (so that the scrolling content doesn't get cutoff at the bottom). You may want to set a sass variable or something for this 40px height.
height: calc(100vh - 40px);
Here's a demo of the new version:
jsfiddle.net/webwhizjim/6f84b7su/3/
Image stretches if I don't use object-fit contains. Stretches in width, losing aspect ratio.
object-fit contain fixes that.
The problem is, the element itself is not contained, just the visible image. Which means if I make the image clickable, the whole element area (even outside the image) is clickable.
https://jsfiddle.net/nyysyngp/10/ (or see code below)
I just want the visible image to be clickable. This seems to work on Firefox, but not Chrome.
body, html
{
margin: 0;
padding: 0;
background-color: red;
display: flex;
height: 100%;
width: 100%;
}
#media
{
display: flex;
background-color: #262423;
justify-content: center;
align-items: center;
flex-direction: column;
flex-grow: 1;
}
#media_split
{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
}
#media_image_container
{
height: 50%;
width: 100%;
flex-grow: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
}
#media_image
{
object-fit: contain;
max-height: calc(100% - 4em);
max-width: calc(100% - 4.7em);
min-height: 100px;
min-width: 100px;
cursor: pointer;
}
#media_tv
{
height: 50%;
width: 100%;
flex-grow: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background-color:blue;
}
<div id='media'>
<div id='media_split'>
<div id='media_image_container'>
<img id='media_image' src='https://i.imgur.com/F26h0tq.jpg'>
</div>
<div id='media_tv'></div>
</div>
</div>
Well some months later I found a solution. Just by adding "position: absolute" to #media_image the problem went away, which in my case didn't break anything else.
In #media_image_container remove display: flex; and add text-align: center;
It will fix the issue.
I am trying to create a 2x2 grid where the height of the four individual boxes (red, blue, green, yellow) are all equal despite how much content they contain.
#rowTwo {
background-color: pink;
min-height: 25%;
display: flex;
flex-direction: column;
align-items: center;
}
#grid2x2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: orange;
width: 80%;
justify-content: center;
}
.box {
display: flex;
flex-basis: calc(50% - 20px);
margin: 5px;
justify-content: center;
padding-top: 5%;
overflow: hidden;
}
<div id={styles.rowTwo}>
<Heading title="My Title"/>
<div id={styles.grid2x2}>
<div id={styles.boxOne} className={styles.box}>
<DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[0]}/>
</div>
<div id={styles.boxTwo} className={styles.box}>
<DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[1]}/>
</div>
<div id={styles.boxThree} className={styles.box}>
<DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[2]}/>
</div>
<div id={styles.boxFour} className={styles.box}>
<DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[3]}/>
</div>
</div>
</div>
The issue I face is that a box expands to the height of the largest content in a row.
Here is an image outlining my problem:
Would anyone know how I could achieve this?
You can do this in CSS by using padding-top to add the height and then absolute positioning to draw your content on top of this padding.
Here is an example: https://codepen.io/anon/pen/xpwooz
#grid2x2 {
display: flex;
flex-wrap: wrap;
background-color: orange;
}
.box {
display: flex;
flex-basis: calc(50% - 20px);
margin: 5px;
justify-content: center;
overflow: hidden;
background: red;
padding-top: 100px;
position: relative;
}
.content {
position: absolute;
background: green;
top: 0;
width: 100%;
}
The problem is you can't change this height dynamically based on the content height. You can either set it to a fixed size or set it to a percentage and have it change size based on it's parents width. I think you'll need to use javascript if you want the height to change based on the largest content element.