Mobile first responsive design

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. Upon looking the layout, on desktop there is a white space gap at the very bottom and also a horizontal scroll. The mobile layout seems fine, but still, that horizontal scroll.

  Also, that's fine about the javascript :>, it might be sloppy right now, but remember to always improve our usage of it when doing other projects.

  Some suggestions would be:

  • a quick fix on the horizontal scroll, is to remove the width: 100vw on your body tag. You might be wondering how it makes that. When using 100vw it also takes the small portion of the horizontal scrollbar that we see on a website. That means even if our layout's height is small and does not create the vertical scroll, the 100vw takes that and adds to the width. 100% on the other hand takes the whole width, but it doesn't take the portion of that vertical scrollbar.
  • your html structure on this one could be a bit better. For example, instead of being directly a child of the body tag, those different elements, they could be wrapped inside a main tag. Then you can have a .container that holds the whole element. Containing those elements with their parent will make your structuring better. I haven't done this one so I can't give any reference, but you can see other's solution on this particular challenge, when you go to your challenge hub and look at this challenge. You can take note of their structurings.
  • instead of using p tags to be the toggler of the dropdown answers, you can use the native details element. This element is intended for dropdown like on this one. This one is fully accessible so you don't need to add arias (used for assistive techs).
  • I saw lots of usage of id attribute. If you are using them for stylings, I highly suggest to use classes instead of ids.

  I tried to fix the background problem. If you inspect your element in dev tools at the bottom, you will see that the background is not applying to the whole layout. I don't know why it won't, hmm.

  But still, good work on this one.

  Marked as helpful

  1