Pure CSS and HTML

Community feedback

• 

  Eric Salvi•1,330

  @ericsalviPosted over 3 years ago

  Looking good.

  A few things I would try instead. I would remove the margins on main and instead add some flex properties to the body to position the content in the dead center.

  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  

  Adding the above to the body will center things for you. Also, you don't need to add the width: 100% on the button if the display is set to block. The 100% is actually causing the button to spill outside of its container. Display set to block is 100% essentially. 

  I would also take a look at the padding of the containers on mobile. Seems to be a bit too tight.

  Lastly, the content width is being set to 50vw so it is like 50% of the screen. The container seems too skinny right before it switches to mobile. Not totally responsive even though technically it is.

  Other than those few things, you are doing a great job! Keep at it.

  1
• 

  Jose Rios•155

  @joseriosdevPosted over 3 years ago

  Thanks a lot for your quick response, Eric! I'm going to definitely take a close look at what you said for future challenges :) and do these fixes.

  0