Skip to content
Submitted almost 2 years ago

Four Card Feature Section Using HTML and CSS

Gora Indiraja Shafa•140
@goraindiraja
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Here, I make my projects using Flexbox. Any recommendations to improve my coding better are welcome :)

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Aman Singh Bhogal•1,010
    @asbhogal

    Hi Gora,

    This is a good attempt however ideally you should be using grid as this retains the structure of the child container elements (ie. width values.) Between 500px and 985px your containers subsequently compress down and change flow when they should keep their structure for this type of content.

    Kevin Powell has a good video explaining the differences and when to use one or the other YouTube link

    Also, your images are missing alt tags - this is important for accessibility so screen readers and assistive technologies can identify the purpose and context of them. This article explains it in further detail Article

    Hope this helps!

    Marked as helpful
  • Matias Ludueña•1,990
    @matiasluduena23

    Hi @goraindiraja! Good work! Just one advice, you @media(min-width: 500px) isn't working because you put the jump of screen in a very low size. Increase that number, @media(min-width: 700px) could work. Try different numbers.

    Good code!!!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord