A begginer/easy solution using HTML and CSS, with @media

Community feedback

• 

  Prantik•660

  @prantiknoorPosted over 2 years ago

  Hey @Fran505. You can change your code as below to solve many issues.

  .cards {
      /* position: relative;
      top: 18rem; */
      
      display: flex;
      /* You need to change flex-direction row to column in mobile */
      flex-direction: row;
  	
      /* You do not need to add this, it automatically be set */
      /* width: 849px; */
      
      margin-left: auto;
      margin-right: auto;
  
      /* You do not need to add border-radius to other columns */
      /* You can remove border-radius from other columns */
      border-radius: 10px;
      overflow: hidden;
  }
  
  .col {
      /* position: absolute; */
      width: 283px;
      padding: 2.5rem;
  }
  

  To center the card:

  main {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  0
• 

  faizan•2,420

  @afaiz-spacePosted over 2 years ago

  Hey @Fran505, congratulation on completing the challenges.

  • use flex property in card class.

  0
• 

  Oscar•0

  @lolster45Posted over 2 years ago

  It looks good, though it's not aligned on the Y axis. You could try the transform: translateY(); property to try at least to move it up on the page. Also, I like the responsiveness of it on mobile, you could center the text/image when it changes into the column view, which would make it looks better in my opinion. Also if I may ask, how exactly did you host your page, I know GitHub offers you to host 1 page for free, but is there another method where you don't have to pay? thanks.

  0