Responsive Page for Submitting Email

Community feedback

• 

  P

  Tomislav Šuto•260

  @RetroApePosted 4 months ago

  Hi Alqorni.

  I see you've been doing a lot of challanges last two weeks. Nice work, keep it up.

  When checking your solution, I noticed that you are using 'width' with percentages a lot. Although it is not a mistake because it can be used if one wants to have certain kind of effect when resizing a window, it is almost never used. Why? - Because using width automatically makes your element unresponsive.

  I've done a lot of research and everyone is using max-width and min-hight when they want their element to have certain width and height; this will still leave some room for the element to resize when viewport width goes under max-width. As for units, rem is used for accessibility reasons.

  When resizing the window, the good thing is that the text is always visible, which is the most important thing. You did that nicely. There is an exception. When resizing height of the viewport; when height reaches below 640px, the text starts clipping. This is because height is set to 70%.

  I tried removing it, but then the element's height goes all the way from top to bottom. Then I saw that there is a previous height that's been set to 100%. Well, I removed all width and height percentages on .bigcontainer and instead put max-width: 950px under @media query and to me it seems to be better. This way, the card will also not stretch when increasing the width of the viewport.

  This is all done by looking at the Dev Tools on the browser. If you do not know about it, I recommend you check it out. It is not complcated and it can help you a lot when trying to find the issue with CSS. This video explains it nicely.

  Also, one good thing to have in mind is that HTML by its own is completely responsive. The moment you start writing CSS, you are either moving away from that responsiveness or you are keeping it responsive. There are videos about that as well (～￣▽￣)～

  I hope I have helped you in some way :)

  All the Best!

  0