I have an image and a div that go next to each other like this:
Instead it looks like this:
I tried to use flex-shrink and grow and that didn't help. Maybe I should take another approach? Or I am just using flexbox wrong here?
.explore-adoption {
display: flex;
flex-direction: row;
max-height: 487px;
height: 100%;
align-items: center;
margin-top: 100px;
width: 100%;
text-align: center;
}
.explore-info {
max-width: 600px;
width: 100%;
max-height: 487px;
height: 100%;
padding: 4em;
background-color: #363635;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
flex-grow: 0;
gap: 1em;
}
.explore-image img {
width: 100%;
align-self: center;
}<section >
<div >
<h2 >Explore adoption safely and securely</h2>
<p >Our platforms empower women considering adoprion by providing choice and privacy.</p>
<!-- ??? -->
<a href="#" >
<span>Learn more</span>
<i ></i>
</a>
</div>
<div >
<img src="https://via.placeholder.com/200" alt="Birthmother at computer">
</div>
</section>CodePudding user response：
I made each "side" to be 50% width. Also added align-items: stretch; to the flex to stretch items vertically. Notice: to make it responsive I removed the max-height. Also added height:100% for the img in case the text makes the left side too high.
* {
box-sizing: border-box;
}
.explore-adoption {
align-items: center;
margin-top: 100px;
text-align: center;
display:flex;
align-items: stretch;
}
.explore-info {
width: 50%;
padding: 4em;
background-color: #363635;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
flex-grow: 0;
gap: 1em;
}
.explore-image {
width: 50%;
}
.explore-image img {
display:block;
width: 100%;
height: 100%;
}<section >
<div >
<h2 >Explore adoption safely and securely</h2>
<p >Our platforms empower women considering adoprion by providing choice and privacy.</p>
<!-- ??? -->
<a href="#" >
<span>Learn more</span>
<i ></i>
</a>
</div>
<div >
<img src="https://via.placeholder.com/200" alt="Birthmother at computer">
</div>
</section>
<br>CodePudding user response：
Responsive Font-size
Set the default font-size for the page by setting it on the root element (html or :root). Any lengths set in rems will be relative to the font-size (from now on it will be referred to as fs) of root. If the fs of root is 16px (browser default) then a length of 2rem is 32px.
In the example, the fs of root is a relative length: 5vmin. vmin/vmax is relative to either the viewport's width or height. If it is vmin, then lengths are relative to the smaller length of the current viewport dimensions -- if it is in vmax, then lengths are relative to the larger length of the current viewport.
Ex. a viewport width of 800px and height of 450px -- 5vmin means 1rem is 5% of 450px and 5vmax means 1rem is 5% of 800px. Since lengths are relative to viewport, if the browser window changes at anytime, all lengths set in rem recalculates and adjusts accordingly. So if all of the lengths are in rem, you'd have a fully responsive page, but it's not perfect. There will be a point when the ratio of lengths will change when the viewport ratio is flipped from landscape to portrait or if one of the viewport dimensions becomes disappropriately smaller or bigger. That situation is beyond the scope of the question so I'll give you a hint: one solution is media queries.
Responsive Elements
Set width and height in percentages.
The parent element that contains both text and image elements should be a flex container and have no padding and margins and hide any vertical overflow (see Figure I).
Figure I - Parent Element (aka article.adoption)
.adoption {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
overflow-y: hidden;
}
Next, the right-side element that has the text should be an flex container with a vertical stacking flow. Set it's height to 100% and it's width to 50%. (see Figure II)
Figure II - Text Element (aka section.info)
.info {
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 50%;
height: 100%;
}
Then on the left-side element that has the <img>, set it's height to 100%, width to 50%, remove padding, and hide any vertical overflow. (see Figure III)
Figure III - Image Element (aka figure.image)
.image {
width: 50%;
height: 100%;
padding: 0;
overflow-y: hidden;
}
For the <img>, I cropped it so that it's a square using a program: paint.NET. Then set <img> width to 100%. If there's a small gap at the bottom, add the following ruleset to figure.image: margin: 0 0 -0.5rem 0. That'll drag the image down and past the bottom border where it'll be hidden by overflow-y: hidden.
View this example in full page mode, dimensions are distorted if viewed in an <iframe>
Note there's an red dashed outline that shows that the two elements are flush -- this is for demonstration purposes and recommended that you remove the ruleset: outline: 1px dashed red from .adoption
html {
font: 300 5vmin/1.2 'Segoe UI'
}
.adoption {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
color: whitesmoke;
background: #363635;
overflow-y: hidden;
outline: 1px dashed red;
}
.info {
background-color: #363635;
display: inline-flex;
flex-flow: column nowrap;
justify-content: center;
gap: 0.5rem;
width: 50%;
height: 100%;
padding: 1.75rem;
}
.title {
margin: 0;
font-size: 1.25rem;
}
.link {
color: whitesmoke;
text-decoration: none;
}
.image {
width: 50%;
height: 100%;
margin: 0 0 -0.5rem 0;
padding: 0;
overflow-y: hidden;
}
.image img {
width: 100%;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
<article >
<section >
<h2 >Explore Adoption Safely & Securely</h2>
<p>Our platforms empower women considering adoption by providing choice and privacy.</p>
<a href="#" >
<span>Learn more </span>
<i ></i>
</a>
</section>
<figure >
<img src="https://i.ibb.co/zNPS1z7/mother.jpg" alt="Birthmother at computer">
</figure>
</article>