3-Column Preview Card Component

Community feedback

• 

  Laharl•1,000

  @UrbanskiDev

  Posted almost 3 years ago

  Hello Durga Jaiswal

  Congratulation on finishing this challenge while trying to improve it

  1. I would recommend you to fix all the HTML issues available in the rapport section above !

  2. In your HTML file, you did use a "button" to make the button "Learn more". While it is a good option, you can make your own button by defining it as a "a" tag, and then use css to make it like you want

  For example; a very basic way to make it looks like a button :

  a {
    text-decoration:none;
    background-color:black;
    color:white;
    padding:10px;
    border-radius:10px;
  }
  

  It will make looks like a black button, and then, you can easily add a link in the "href" of your "a" html tag to redirect.

  3. You tried to make it responsive, which is a good thing ! However, there's some tips I can give you :

  • When you're in desktop mode, there is a moment where you text start to resize with the design (you can use the browser dev tools to see how responsive your page is) at width 800px, maybe you could add an other media query to make it more natural between 600px and 800px.

  • You could add a min-width, to avoid your content to be resized too much if the size become too small

  .section{
     padding:35px;
     max-width: 250px;
     height: 350px;
     min-height:300px;
  }
  

  • And for the margin, I would avoid to use % as an unit, it is better to use px or rem for that purpose, I add a link where you can have the best practices for units, it is a bit old, but it should help you : https://gist.github.com/basham/2175a16ab7c60ce8e001

  I hope my comment will be helpful to you !

  10

  Marked as helpful