Responsive Hero Section
Hello everyone, I hope you can understand my English as it is not my first language.
So the thing is I am trying to create a hero section on my portfolio practice. I created a <div> container called hero
inside this container has a <div> that has a class of left inside it has h2 and a p element
and for the right side is only image
I want to achieve responsive hero the thing is that the image on right is overlapping when I am on smaller screens
refer to the first I uses Pesticide plug in on my browser to see the overlapping image it overlaps to the container no mater what i do even tho i set it to percentage size
I already created a lot of media queries to set the size of image to lesser percentage but it looks ugly, Is there any other way?
the other problems I encounter is on smaller screen, the image wont stay on the bottom of my container refer to the image. I want this image to always on the bottom i don't know why does it go up even though i set up justify content space between on my flex
please refer to this code
The image I use in this codepen is just example image please don't bother about the image and I hope you guys can understand what I am saying 🙂
https://codepen.io/Jenzel-Delavictoria/pen/EaYPwYY
1 Reply
If you want the image to overlap (I presume you want it behind the text), I would use position:absolute rather than setting flex on the container. That way you could also easily ensure that it is at the bottom at all times.
Then, on smaller viewports you could revert to it having a static position so that it flows below the text
Sorry, I miss-read that part. On smaller screens you want it to overflow (I was miss-lead by your images which contradict what you are saying)