Mr.Sushi
Mr.Sushi
KPCKevin Powell - Community
Created by Mr.Sushi on 8/9/2023 in #front-end
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;
4 replies
KPCKevin Powell - Community
Created by Mr.Sushi on 8/3/2023 in #front-end
Creating two row with grid!
15 replies