BLOG PREVIEW CARD

Community feedback

• 

  abedzeidan•340

  @Abed001Posted 11 months ago

  Hello good job, I know that there are a lot of comments here but there is also one thing to add which is the active state when the card hovers the shadow should become bigger you can use something like this resource: https://www.freecodecamp.org/news/css-box-shadow-property-with-examples/

  and also this is the code i have used : .cardshadow{ box-shadow: 10px 10px rgba(0,0,0);

  } .cardshadow:hover { box-shadow: 15px 15px rgba(0, 0, 0); /* Increase shadow size and opacity on hover */ } keep going!!

  Marked as helpful

  1
• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  Greetings mate!

  I leave you the following comments that may help you improve your code:

  • Apply display: block to the image to remove that annoying white space
  • To center the content you can use grid in the body, as follows:

  body {
      width: 100vw;
      min-height: 100vh;
      box-sizing: border-box;
      font-family: 'Figtree', sans-serif;
      font-size: 18px;
      background-color: var(--primary);
      display: grid;
      place-content: center;
      gap: 20px; /* Leave a space between your article and your footer */
  }
  
  article {
      background-color: var(--white);
      width: 280px;
      height: 400px;
      /* margin: 110px auto; You don't need this anymore */
      padding: 1.5rem;
      border: 1px solid black;
      border-radius: 15px;
      box-shadow: 7px 8px 1px black;
  }
  

  Marked as helpful

  1
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello Isaiah!

  Your solution looks great!

  I have two suggestions for improvement:

  • First: For semantic reasons, replace your article with main. The tag article would make more sense if the card was part of a bigger website (and it certainly would in real world), but since it is all we have on the screen, you can use main.

  This tag change may have little or no visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

  • Second: I noticed that you used margin to place the card in the middle of the page. Here's a very efficient (and better) way to center the card:

  You can apply this to the body (in order to work properly, you can't use position or margins):

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have other suggestions about your code that might interest you.

  • The <figure> tag should be used only when captions are required with <figcaption>. In this challenge, it is not required.

  • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

  • Using width: 100vw generates an unnecessary horizontal scrollbar on some screens. So you can remove it.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  1
• 

  turanarican•200

  @turanarican2022Posted 11 months ago

  All the above comments make sense and I wanna add something. There is another value for min-height. It is 100svh instead of 100vh. It helps mobile devices to show all the content even while some of the screen is occupied with top bar of the browser. You can search YouTube for Kevin Powell's video on this.

  Happy coding!

  0