3-column-preview-card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there! 👋

  Good effort on this challenge! 👍 The site looks great on my desktop view. 🙌

  To solve the problems that the site currently has is by doing the following.

  • First and the most important is to not use absolute positioning and relative positioning as well at all to finish this challenge.
  • Second, make the body element as the flex container for the main element. The main element is going to be the direct child of the body element and wrapping all the cards element. By doing that, you could make the cards perfectly in the middle of the page. It's important to not limit the height of the body element so use min-height instead.
  • Third, don't set the height for the card elements, let the content inside it dictate the height of them.
  • Fourth, don't use percentage unit to set a padding or margin. Use either rem or em units. By using %, the padding will always increase as the screen gets bigger.

  I would suggest that for the Learn More buttons, use interactive elements, which in this case the anchor tags would be the best choice. Usually, the Learn More button would navigate the user to a different part of the page or to another page which is what the anchor tag is for.

  That's it! Try to keep things as simple as possible and hope you find this useful! 😁

  Marked as helpful

  2
• 

  Abdelrhman Kamal•450

  @AbdelrhmanX7Posted over 2 years ago

  hi ac3

  if you want to center your element in screen mobile i prefer to use media query you can find all thing you need about media query here (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) second you have a problem in .main you use display relative. you should use position: relative to fix your problem

  Marked as helpful

  1