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;
3 Replies
for that little gap try adding
display:block; on the img tag 😉Magic! I have been trying to get rid off that gap for hours 😄
I had a solution but I knew it can't be right...
position: relative;
top: 8px;
Thanks for the help!
Any suggestion what else I could change to make it the most optimal?imo there is a bit to much white space between left and right side 🙂