ColumnCard HTML CSS Flex

Community feedback

• 

  Erik Samuel Medeiros•180

  @samuerikcoderPosted over 1 year ago

  Hello my friend, I took a look here at your solution and I will tell you what will need to be added. You used the absolute position more than you should. It was enough to have added a flex display in the body. Remove the Overflow hidden on mobile device media querie. I think that the mobilefirst is more easy.

  .container {
  overflow: visible;
  }
  

  To see how to use Grid in this challenge, see my solution: https://www.frontendmentor.io/solutions/3column-preview-card-component-Hubl-E16PC

  But basically you would use the Grid display on mobile to leave all the items stacked and on the desktop you would use the grid-template-columns to put them side by side.

  body {
  display: grid;
  place-content: center;
  }
  
  .container {
  display: grid;
  }
  
  @media(min-width: 600px) {
  .container {
  grid-template-columns: 1fr 1fr 1fr;
  /* 1 space for each*/
  }
  }
  

  Marked as helpful

  1

  ---

  

  Pascal•40

  @CodingEulePosted over 1 year ago

  @samuerikcoder

  Thank you for your Time. Really appreciate your effort. Thanks I implemented the changes.

  I started to analyse your Code and try to learn from it. Can you tell me what the attribute webkit-font-smoothing: antialiased; is doing? I can see no difference. Puh, and what's with #root, #__next there is no class with this name in your html. What are these CSS rules for?

  Have a nice day my friend.

  0

  

  Erik Samuel Medeiros•180

  @samuerikcoderPosted over 1 year ago

  @CodingEule This early code we call the css reset and I got these properties from this site: https://www.joshwcomeau.com/css/custom-css-reset/. Basically all this is used to leave all browsers with the same css pattern and you do not need to understand what everything is doing, let alone memorize everything, but curiosity is essential for learning. Some time ago not all properties were supported by all browsers and even today when a new one arises ends up having this problem. That's why sometimes you'll see -webkit in some properties. This is for browsers to support them. The one you mentioned serves to make the edges smoother in some browsers.

  Marked as helpful

  0

  

  Pascal•40

  @CodingEulePosted over 1 year ago

  @samuerikcoder

  Thanks man!

  The website seems to be a really nice ressource!

  1