@traez's Four card feature section using HTML and CSS

Community feedback

• 

  Suraj Raju Hadage•670

  @SurajHadagePosted over 2 years ago

  • I would recommend you to not upload unnecessary files and folders to save server space.
  • Use headings from h1 to h6 chronological order. This is more meaningful and well structured web layout.
  • Always use <h1> tag to your every webpage.
  • You can structure your <header> like :

    <h1></h1>
    <h2></h2>
    <p></p>
  

  • This is more short. You can use <article> or <section> tag for every card. And structure like:

    <h3>
    <p>
    <figure>
  

  I hope you find this helpful.

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Trae, congratulations for your solution!

  To change your solution to the mobile version, I mean all the cards in the same column, all you need to do is change the grid-template-column: 1fr or instead of using grid you can use display: flex; with a media query.

  See the code below:

  @media (min-width: 37em)
  main {
      display: flex;
      /* grid-template-columns: 1fr; */
      /* column-gap: 1rem; */
      /* width: 62rem; */
      /* height: auto; */
      flex-direction: column;
  }
  

  If you do that all cards will stay in the same column, so all you need to do is adjusts some padding to center everything.

  Hope it helps and happy coding!

  Marked as helpful

  0

  ---

  

  Trae Zeeofor•490

  @traezPosted over 2 years ago

  @correlucas Love the hack. Guess it worked cos minimum change between desktop and mobile versions. I build mobile design first, hence the voluminous code. But well noted for next time. Thanks.

  1