So, i'm trying to get my left div to be the same height as the right div, just let me show the code ( i did in react.js ) and the styles
This is the structure
<FlexBoxModal>
<FlexBoxMPhoto onClick={e => e.stopPropagation()}>
<img src={sp.photo} />
</FlexBoxMPhoto>
<FlexBoxMComments
onClick={e => e.stopPropagation()}
></FlexBoxMComments>
</FlexBoxModal>
My styles
export const FlexBoxModal = styles.div`
max-width: 70%;
min-width: 50%;
height: 605px;
margin: auto;
margin-top: 3rem;
margin-bottom: 4rem;
overflow-y: hidden;
overflow-x: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background: red;
`;
export const FlexBoxMPhoto = styles.div`
flex: 1.25;
display: flex;
align-items: center;
justify-content: flex-end;
img{
max-width: 100%;
min-width: 70%;
min-height: 300px;
max-height: 605px;
object-fit: cover;
}
`;
export const FlexBoxMComments = styles.div`
flex: .75;
width: 100%;
min-height: 300px;
max-height: 605px;
background: white;
`;
The Problem : i've thinking how to can i make this work, but i really don't know where to start, i fixed mi left div so i can position the img between a min-size and max-size, but, how can i make mi right div follow the height of my left div ? Let me show you this output
Test
What i want : So, as you can see, the white div isn't the same height ad the other one, how can i make that happen? both with same height?
Thanks !
The FlexBoxModal container that you have has align-items set to center. Switch that to stretch. That's the container that controls both the children.
Related
I'm a complete begginer, already desperate for a solution. I know it's basic stuff, but I've been through so many tutorials, tried grid templates, basically tried everything. Now it's all mixing up in my head and I will be grateful for any help.
I have six images in a flexbox, which are meant to be counters. They are styled.divs, containing an styled.img, styled.p and another styled.div wrapping the React CountUp. Everything is wrapped in a styled.div with display: flex. I have six ImgWraps and six p tags, since there will be different numbers and texts on it - this is the only way to make it adjustable (I think).
I also have the buttons, but they are not the problem here (at least for now).
Here's what I want to achieve:
Responsive, shrunk flexbox
Full-size flexbox
And here's what I have:
Div's flipping out of the containter
Huge row gap between
Some images go beyond the container as well as the p tag.
The full-size grid is almost as intended. The row gap is too big and I don't know what's the reason for that. I don't need the images to be "sticked" to each other, I wanted to have a small gaps between them. I've also tried centering the texts on the image, but nothing worked except the solution I'm using now. Also, the texts will have different length as well as the numbers, so I'm not sure how to do that automatically.
AboutWrapper (the main container) code:
export const AboutWrapper = styled.div`
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 20 auto;
object-fit: cover;
align-content: space-evenly;
z-index: 1;
height: 770px;
width: 100%;
max-width: 1200px;
margin-right: auto;
margin-left: auto;
padding: 0 24px;
row-gap: 0;
justify-content: center;
`;
The Img1Wrap (one of six):
export const Img1Wrap = styled.div`
max-width: 343px;
justify-self: center;
align-self: center;
justify-content: center;
text-align: center;
align-content: center;
position: relative;
height: 30%;
`;
ImgDesc, the p tag on the ImgWrap divs.
export const Img1Desc = styled.p`
font-size: 18px;
position: absolute;
height: 100%;
color: yellow;
z-index: 4;
top: 50%;
left: 30%;
`;
And the styled.img:
export const Img1 = styled.img`
width: 90%;
z-index: -1;
align-self: center;
justify-self: center;
margin: 0 0 5px 0;
padding-right: 0;
`;
This is just the basic styling you need to get the same distribution of items of that grid:
<body id='root'>
<div class='flex-box'>
<div class="templatecontent" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">
</div>
<div class="templatecontent" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">
</div>
<div class="templatecontent" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">
</div>
<div class="templatecontent stat bg-image" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">
</div>
<div class="templatecontent stat bg-image" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">
</div>
</div>
</body>
And the css:
#root {
height: 100vh;
width: 100vw;
}
.flex-box {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.templatecontent {
flex-basis: 33%;
flex-grow: 1;
background-position: center;
background-size: cover;
}
#media (max-width: 600px) {
.templatecontent {
flex-basis: 100%;
}
}
Code example
I have an input container here:
const InputContainer = styled(BaseInputContainer)`
display: inline-block;
width: 100%;
align-items: center;
input[type="number"] {
background: black;
width: 100%;
text-align: center;
}
`;
I want the width of the container to be the same size of the input field, basically
width: fit-content
but that does not work in the InputContainer component. How do I do this?
I'm trying to shrink down an iframe that contains one of my other websites, but I want to maintain the scale and center it. Right now I have the scaling part figured out, but I can't seem to get it centered.
I've tried flex with justify-items: center & align-items: center on its parent, but it stays glued to the top left. I've also tried margin: auto which does nothing, but when I add margin-left it moves over a bit. If the parent has 100% width, and there is margin available, why wouldn't margin: auto center it? I'm confused.
Here's the html/jsx:
import './Desktop.css';
import desktopMockup from '../../assets/desktop.png';
const Desktop = ({ site }) => {
const
return (
<div className="desktop">
<div className="iframeDesktop">
<iframe src={site} scrolling="no" title="desktop" width="1920" height="1080"></iframe>
</div>
{/* <img src={desktopMockup} alt="desktop mockup" /> */}
</div>
);
};
export default Desktop;
And here's the css:
.desktop {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
}
.iframeDesktop {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-items:center;
}
iframe {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
transform: scale(0.17);
transform-origin: top left;
min-width: 1920px;
min-height: 1080px;
}
I wonder if you could use transform-origin: top center; instead of transform-origin: top left;. Could you give that a try?
I have a parent with a flex child :
.card {
background-color: white;
max-width: 80vw;
height: auto;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
bottom: 10;
overflow: hidden;
border-radius: 32.5vw;
z-index: 100001;
}
.menusC {
width: auto;
height: auto;
margin: auto;
display: inline-flex;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
justify-content: center;
background-color: red;
}
<div class="card">
<div class="menusC">
<div class="menuBC">
......
</div>
</div>
</div>
As you can see my flex is inline-flex which means the flex get the size of its items.
But the parent card insist to have it's own width (takes the max otherwise 100%).
How would i make the card - be exactly at the width of the flex - menusC ?
I have not seen what it looks like when the code is executed, but why has the parent got a fixed position with left and right set to 0?
This is telling it to go all the way from left to right.
Maybe change position: fixed to something else, or remove the left or right properties if fixed position is needed.
I've have problem with showing images on my project. I would like to show image when I hover text. It's working correctly if using Chrome but at least in Safari image stays partly hidden inside it's parent element.
Screenshot from Chrome
Screenshot from Safari
Code for parent element:
const PortfolioItemsWrapper = styled.div`
width: 100%;
max-width: 960px;
position: fixed;
bottom: 0;
overflow-x: scroll;
white-space: nowrap;
display: block;
text-align: center;
justify-content: center;
`
<PortfolioItemsWrapper>
{props.allWordpressWpPortfolio.edges.map(portfolioItem => (
<PortfolioWorks
key={portfolioItem.node.id}
image={portfolioItem.node.featured_media.source_url}
id={portfolioItem.node.id}
title={portfolioItem.node.title}
link={`/portfolio/${portfolioItem.node.slug}`}
/>
))}
</PortfolioItemsWrapper>
Code for image:
const Wrapper = styled.div`
display: inline-block;
margin: 0 10px;
`
const ImageWrapper = styled.div`
max-width: 300px;
position: fixed;
top: 50%;
left: 50%;
`
const PortfolioImage = styled.img`
max-width: 300px;
z-index: -5;
opacity: 0;
transition: 0.25s linear;
`
<Wrapper key={id}>
<ImageWrapper>
<PortfolioImage style={imageStyle} src={image} />
</ImageWrapper>
<PortfolioItemNameLink to={link} onMouseEnter={changeStyle} onMouseLeave={resetStyle}>
{title}
</PortfolioItemNameLink>
</Wrapper>
Although I'm not sure this might work:
Try adding overflow-y: visible; to your parents css.
Let me know if that works :)
I got this right by just pretty randomly testing things. Don't know why but it's working. If someone knows why I would like to know.
I set fixed position for parent div of PortfolioItemsWrapper.
const Wrapper = styled.div`
width: 100%;
max-width: 960px;
position: fixed;
bottom: 0;
`
const PortfolioItemsWrapper = styled.div`
width: 100%;
max-width: 960px;
white-space: nowrap;
overflow-y: visible;
overflow-x: scroll;
display: block;
text-align: center;
justify-content: center;
`