@pikapikamart
Posted
Hey, awesome work on this one. Though for desktop state, the layout is too wide and if you try to zoom out, you will see that the layout doesn't really respond well and just kind of makes the content out of place. For mobile state, it looks fine but it could use more width since it is small.
Besides Aakash Verma great feedback, here are some other suggestions:
- Don't use
width: 100vw
since this will only add a horizontal scrollbar at the bottom, since this value does not account the vertical scrollbar's width. - Avoid using
height: 100vh
on a large container like themain
as this makes the element's height capped based on the viewport/screen's height. Instead usemin-height: 100vh
so that the element will expand if it needs to. - Remove the
.container
'sheight: 50vw
. Also, just in general, you don't want to just usevh
unit inheight
orfont-size
or just in other since it is not consistent and will vary depending on the user's screen-size. It would be better to userem
. Not saying thatvh
is bad, but using it should be properly controlled. - The
h3
after theh1
could just be replaced byp
tag since theh1
is enough for that section. But if you insist on using heading tag, go withh2
. When using a heading tag, make sure you are not skipping a level. If you useh4
then make sure thath1, h2, h3
are all present. Monthly Subscription
should be usingh2
and noth3
and the pricing should just be ap
tag since the heading tag above it already gives information on that section's content.Why us
should beh2
as well.- Those information on the
Why us
section, as you can see, those are "list" of things on why the user should "choose" them. Meaning, aul
on it would be really nice and not a singlep
tag to wrap the whole text. - Lastly, just addressing the styling on the overall layout.
Aside from those, great job again on this one.
Marked as helpful
@nehanalinik
Posted
@pikapikamart Thanks for really breaking down and explaining it.
- I guess
height: 100vh
did not help. - I should checkout more about
min-height
- Really helpful how you have given an insight on heading tags, they should be inorder else it's not necessary. Instead use
p
tags - I did not really checked the
Why us
section hasli
tags.