Image in flexbox.
In the Hero section I would like to align the Image with the bottom of the container (border-bottom is the indication). And possibly make it responsive. I have tried align-items: flex-end but there is a little gap in-between the border and the bottom of the Image.
Please help me to figure out what can be the solution
https://codepen.io/MrSushi22/pen/Rwqmgea
```js
import Image from "next/image";
const Hero = () => {
return (
<div className="flex-hero">
<div className="left-column-hero">
<div className="hero-text">
<h1>Hej my name is Name</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque laudantium tenetur molestiae necessitatibus, molestias veniam tempora. Reprehenderit sit culpa, perspiciatis officia commodi cupiditate ipsam sunt magnam, distinctio, atque alias velit.
</p>
</div>
</div>
<div className="right-column-hero">
<Image src="/hero.jpg" className="profile-img" width={400} height={400} alt="Profile Picture" />
</div>
</div>
)
}
export default Hero;
Please help me to figure out what can be the solution
https://codepen.io/MrSushi22/pen/Rwqmgea
```js
import Image from "next/image";
const Hero = () => {
return (
<div className="flex-hero">
<div className="left-column-hero">
<div className="hero-text">
<h1>Hej my name is Name</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque laudantium tenetur molestiae necessitatibus, molestias veniam tempora. Reprehenderit sit culpa, perspiciatis officia commodi cupiditate ipsam sunt magnam, distinctio, atque alias velit.
</p>
</div>
</div>
<div className="right-column-hero">
<Image src="/hero.jpg" className="profile-img" width={400} height={400} alt="Profile Picture" />
</div>
</div>
)
}
export default Hero;
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
