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
Mannix
Mannixβ€’15mo ago
for that little gap try adding display:block; on the img tag πŸ˜‰
Mr.Sushi
Mr.Sushiβ€’15mo ago
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?
Mannix
Mannixβ€’15mo ago
imo there is a bit to much white space between left and right side πŸ™‚
Want results from more Discord servers?
Add your server