html and css

Community feedback

• 

  Karishma Garg•1,010

  @karishma-devPosted over 2 years ago

  Hi, Your solution looks good.

  Few suggestions:

  1. To properly center the card you can use something like this: body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; In this, justify-content will align the content to the center of the main axis and align-items will align the content to the center of the cross-axis (perpendicular to the main axis).
  2. For the problem you are facing in the headers class, you can see that in dev tools it is showing that all the heading tags have their own margins that's why your layout gets disturbed as you haven't overridden the margin in .headers class.
  3. In the CSS code, you can remove the max-width media query and write its content before the min-width query, and then just make the necessary changes that you want for the desktop version. For example: I can see that you have written margin-left and right auto for .main-container in both the queries, so if you want this class to have these margin for the whole layout then write it without media queries.

  Hope this helps you! Good luck!

  Marked as helpful

  0

  ---

  

  jake•140

  @jakewebdPosted over 2 years ago

  @krrish105 thank you so much!

  1
• 

  Marko Đurić•60

  @MarkoDjuricPosted over 2 years ago

  Check out how to use rem units instead of px units. You should start out using CSS grid - less code than with flexbox. For example this layout you can set like this:

  1. display:grid;
     place-items: center; -- on "main-container"

  2. @media screen and (min-width: 376px){ grit-template-columns: 1fr 1fr 1fr; } So, in this way you have 3 equal columns without flexbox percentage with more precision.

  Marked as helpful

  0

  ---

  

  jake•140

  @jakewebdPosted over 2 years ago

  @MarkoDjuric thank you! I recently learnt flexbox and I havent learnt grid yet but i definitely will keep this in mind.

  0