Mobile first responsive solution using Tailwind CSS

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted 7 months ago

  Hey ! great work out there i just notice that you using margin to center horizontally the 3 column card component but it doesn't work as i notice , i suggest that you can use display : grid or display : flex with a min-height or height for proper alignment . by adding those css property you properly align the card horizontally . thats all happy coding !

  ** the my-12 is apply on section **

  .my-12 {
    margin-top: 3rem; // remove this
    margin-bottom: 3rem; // remove this 
  }
  

  body {
    margin: 0;
    line-height: inherit;
    display: grid; // add this 
    place-items: center; // add this 
    min-height: 100dvh; // add this 
  
  }
  

  Marked as helpful

  0

  ---

  

  Abhishek Kumar•100

  @abhixdevPosted 7 months ago

  @AkoToSiJeromeEh Hey, thanks for your feedback. I've made changes to my code based on your suggestions. Although the my-12 (margin of 3rem top and bottom) is intended for mobile devices. In the design file for mobile, there is some empty space at the top and bottom, but the margin won't work for medium-sized screens. However, following your suggestion to create the column card component, I've made the changes. Please check the live website and let me know if it works as required. Thank you.

  1

  

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted 7 months ago

  @abhixdev already check it and the card is now horizontally centered even i zoom-in or zoom-out it behave on its position . happy coding again !

  1