Vanilla CSS, Flex, Grid, Mobile-first, BEM, Responsive Landing Page
Design comparison
Solution retrospective
Hello!
I had some trouble placing the hero image in intermediate sizes (especially between 480px
and 768px
). If you have a better solution than mine, I'd be glad to hear about it.
The W3C HTML validator considers it invalid to place a h2
inside a ul
. I placed it there to have it as a grid element and place it among the li
elements.
I then placed it inside a li
, but I wonder if this is an accessible solution.
Any other advice is welcome =)
Community feedback
- @HA3IKPosted 12 months ago
About the “list”: I think that this is not a semantically correct solution.
Even if the
H2
outline, at the current position, extends to the entireSECTION
correct. I don't see the point of making the title, in the markup, a list item.H2
should be just a heading for theUL
, not an item of it.SECTION > H2 + UL > LI*5
I also saw that you have a duplicate ID
linearGradient#a
. You can easily fix this by simply declaring a genericSVG[height=0]
somewhere separately on the page, it should work:<svg height="0"> <defs> <linearGradient id="a"> ... </linearGradient> </defs> </svg>
0 - @HA3IKPosted 12 months ago
Hello, About “hero-image”.
But 1st: it's a very nice effect u got 👍 I'd leave it 😅
If you want to control this image within its position, you just need to disable its
absolut
position (make itposition:static
) THEN or changeobject-fit
to "contain", or addoverflow:visible
.IF you plan to center everything in one column (like on the mob.):
.hero__body { margin:0 auto }
ELSE IF you want to keep
.hero__body
andpicture
horizontally, just make the parent element Flexbox.hero__container { display:flex }
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord