Successfully cloned a blog-card

Community feedback

• 

  MahmoodElsaayed•150

  @MahmoodElsaayedPosted 4 months ago

  • Congrats on completing the project 🎉

  • Regarding your query,

    • In this case it's actually quite simple. you can use the clamp(min, ideal, max) to set a responsive width to the card.
    • here's how to do it
      1. remove media queries
      2. in .blog-card set width: clamp(310px, 43vw, 384px)
         • short explanation: basically, clamp tells the .blog-card "if the ideal value grows or shrinks you'll change with it but you can't be lower than min or higher than max
         • long explanation: I'm really bad at explaining things concisely, so here's a visual guide that helps illustrating how it works.
      3. You'll notice that the img's layout broke. You'll need to set it's width to 100% so it occupies only the width available to it instead of it's default width, and lastly add a margin-right: 23px to the .card-image class to stop that overflowing.

  Marked as helpful

  0
• 

  Mahmood•1,510

  @MahmoodHashemPosted 4 months ago

  Hey there! 🙋🏽‍♂️

  Congratulations on finishing the challenge! ✅

  Your project is looking amazing!

  The max-width property in CSS is a great way to control the size of a box without using media queries. It sets the maximum width of an element, ensuring that it doesn't grow larger than the specified value. This allows the element to adapt to different screen sizes. When the screen size is made smaller, the element will shrink itself to fit within the specified maximum width. This is a useful technique for creating responsive designs that can accommodate various screen sizes without the need for complex media queries. IN case if the largest width of your card is 384px you can use max-width instead of width to be responsive without using media query

  Hope you find this helpful!

  Marked as helpful

  0