HTML CSS Javascript

Community feedback

• 

  Micah Ishengoma•150

  @coderMicahPosted over 3 years ago

  Thanks for the feedback.....I appreciate the snippet I'll work on the sizing issues

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. The layout in desktop is fine, though there are missing like what you said, the blue background, for the mobile view it is fine as well, but there are issues when resizing the layout to reach the mobile state.

  Suggestions would be that:

  • On the blue background, what you can do is that, use a pseudo-selector on it like ::before. Making the showcase selector have a position: relative, then create its showcase::before and that is where you will place the blue background. I tweak it a bit and came with this snippet

      content: "";
      position: absolute;
      right: -4rem;
      width: 40rem;
      height: 20rem;
      background-color: blue;
      z-index: -1;
      bottom: 0;
      border-bottom-left-radius: 14rem;
  

  You could try this one and see how it goes. Then you could just adjust it if you need to and also applying it on the next blue background at the bottom part.

  • Adjusting the whole padding of the layout. Right now, the paddings are too little and making the layout look like spread. Adjusting it more like in the original will be really awesome.

  • On your cards section, I recommend not using vh unit on the height of the container. If you resized the browser, you will see that the layout shifts because it is relative, to the remaining visible part of the screen or the browser. Instead, use rem to make it fixed or let the elements inside that selector create the dimension it needs and just add a padding to the top and bottom of it.

  • On your newsletter section as well, not recommend using vh units. Use rem or allow the content.

  • On the newsletter section as well, the inputs, they need to be wrapped inside a form element. That submits right, so it is intended for it to be nested inside form tags and not just div. Also the "contact us" button next to it, it needs to be button and not a tags, making it button will make it submit the form if it passed somehow a verification.

  • On the footer section, the social media icons needs to be wrapped inside a tags, since they are links right, nesting them in a tags is good.

  Resizing issues:

  • On the hero section, the two buttons/links are now overlapping each other, and the "get it on firefox"'s text are now wrapped in another row.

  • Adding overflow: hidden on the hero section will prevent the scrollbar at the bottom, which is caused by the hero's image width overlapping the container's width.

  • On your bookmark section, the text are narrow because the image next to it doesn't really scale on the resize.

  • The extension part on the bottom needs to have margin so that the 3 extensions are not really touching each other.

  • On the footer, your ul doesn't really respond well thus making the content overlaps it and creating again another scrollbar at the bottom.

  It might be a lot, but checking those will be really great. But still, good job on this one^^

  0