@pikapikamart
Posted
Hey, great work on this one. The layout in desktop is somehow wider and the mobile state, there is this scrollbar.
First, some suggestions would be that:
-
Please refrain from using
height: 100vh
, using this will make your content have only height based on the screen or viewport. Which in your case, the body tag have it, and if you resize your browser, the layout is destroyed and got small. Instead of this, usemin-height: 100vh
, this will make sure that thebody
will get atleast a minimum of 100vh of the browser. By doing this, you should add a padding to the top and bottom of theinfo
selector. -
Also, I saw a lot of usage of percentages(%). Just make sure that you tested well enough the layout since when they are nested, somehow it is really hard to handle. That is why we tend to use
rem
unit. -
Your heading (h2) could be h1. But this is just preference. But using h1 in a webpage is a good way.
-
By doing those mentioned above, you could just remove the
overflow
declarations on yourcontainer
selector. This also makes the breakpoint much cleaner. -
The mobile state, remove the
width: 100vw
declaration, this causes a scrollbar at the bottom or horizontal swipe.
5.1. Also on the mobile state, it will be really good if you somehow adjust the padding on the info
selector, so that the text will have more width and not clamped.
But still, really good job^
@florinpavel22
Posted
@pikamart Hi, thank you so much for the detailed feedback. I have taken it into consideration and made adjustments to the layout. :)