Responsive Blog Preview Card - HTML CSS

Community feedback

• 

  Younes Atyq•240

  @younes-atyq

  Posted 11 months ago

  Hello @shailesh7333, congrats completing the challenge!

  I recommend using a fixed width for your card and employing media queries to adjust its style across different screen sizes. This will significantly enhance your card's visual appeal on various devices.

  Avoid using the !important declaration as it can lead to style conflicts. Instead, prioritize specificity in your CSS rules. For instance, if the .blog_title element is overridden by the style in .blog_preview_child p, create a more specific selector like .blog_preview_child p .blog_title to target the title within its parent element.

  Consider replacing generic tags like p with more semantic elements like heading tags (e.g., h1, h2) or span tags for better structure and styling control.

  14

  Marked as helpful
• 

  xNyfPtx•1,260

  @xNyfPtx

  Posted 11 months ago

  I haven't read your code yet but you should never really use important in any circumstance. Just try to keep the speficity as low as possible by using classes instead of ids for styling, avoiding descendant/combinators/child selectors such as >, + or ~ and pseudo-elements/classes such as :not, :has, as much as possible.

  Also, you don't really need to scale the image size using transforms. Use width, height and the aspect-ratio properties instead. You would typically use transforms for animations most of the time

  13

  Marked as helpful