HTML, SCSS, Mobile first approach and BEM

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  Greetings Rebecca So far so good with your project, well done. Here are a few suggestions from my side:

  • Well done with responsive design , your page can be viewed on mobile , tablet and desktop. There are some few areas that needs to be covered though.
  • the button is moving out of position because of the following: You have a form container with 2 elements - the input email and the button. The elements are displayed using flex with a direction of row on desktop. The input email has a width of 100% that is the whole width of the container and the button has a width of 60%. By default flex items are forced into a single line (nowrap) if flex-wrap is not set. The 2 items cannot therefore fit into the container - causing an overflow. Using transform translate on the button will not be beneficial . Try something like this using flex grow, flex shrink and flex basis which can be shorten to just flex :

  form__button {
  	/* width: 60%; */
  	/* -webkit-transform: translateX(-33%); */
  	/* transform: translateX(-33%); */
  	flex: 1 1 50%;
  }
  
  .form__input {
  	/* width: 100%; */
  	margin-bottom: 1rem;
  	flex: 1 1 50%;
        margin-bottom: 0;
  }
  

  • form inputs must be associated with a label to help assistive technology users understand the expectations.
  • do not skip headings an h2 can be followed by an h3 - skipping to h5 is not recommended.

  Happy coding

  0

  ---

  

  Rebecca•190

  @bexicaaaPosted over 3 years ago

  @ChamuMutezva thank you very much for helping me with the form section. Now things are more understandable for me. So I can use h3 and change the font-size if I want it a bit bigger?

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  @rebecca0208 , thats very correct Rebecca, use css for styling and yes in this case make the font bigger by changing the font-size.

  0

  

  Rebecca•190

  @bexicaaaPosted almost 3 years ago

  @ChamuMutezva Hy, I am lookig at your comment after a long break and discouragement...I tried what you suggested but it is not workig. I think I wil retake this challenge!

  0