@ApplePieGiraffe
Posted
Hey, nice job, Noxde! 👏
Your solution looks good and is responsive! 👍
I only suggest,
- Perhaps doing something about the hero image on large screens (since currently, it overflows the body of the page and creates some blank space along the right side of the page) such as setting
overflow-xof the body tohiddenor moving the image closer to the center to the page and away from the edge.
Also, if you're interested in clearing up those issues in your HTML report, I believe adding a <title> tag to your SVGs will get rid of the "Anchor element found with a valid href attribute, but no link content has been supplied." errors.
Cheers!
Keep coding (and happy coding, too)! 😁
@Noxde
Posted
@ApplePieGiraffe Thanks for you'r feedback!
As for the hero image, i already have overflow-x: hidden; on the body and i've tried the site on my tv and i dont have any problem regarding the image overflowing, on the other hand i'll have to try that with svg's.
I also have a question. How can i make it so on bigger screens the image still overlaps the section below? because when i see it on my tv in example, it stays on the hero section as you can see in the comparison above.
Thanks in advance and Happy coding to you as well! 😁
@ApplePieGiraffe
Posted
@Noxde
If you want the hero image to overlap the section below (even on large screens), I think you'll have to set a fixed height on the hero section. Currently, the height of the hero section is set with vh units, meaning on screens that are large (and therefore have a bigger viewport height value—such as your TV) the height of the hero section will grow and it may no longer overlap the section below.
Setting the height of the hero section to like 37rem or so might do the trick, I think. 🧐
Happy coding! 😁
@Noxde
Posted
@ApplePieGiraffe Thank you for the help! I just fixed the report issues and the hero image to overlap on larger screens, i might change something else later but for now looks pretty good 👌
