Responsive 3-column challenge using flex

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Tamar, It looks good!...

  My suggestion:

  • Using more than one <h1> is allowed by the HTML specification, but is not considered a best practice. Using only one <h1> is beneficial for screenreader users.

  ---> Multiple <h1> elements on one page

  Hope this help!... Keep coding👍

  Marked as helpful

  0

  ---

  

  Tamar•80

  @ttaammaarrPosted over 2 years ago

  @Bayoumi-dev Hi Ahmed,

  Thank you so much for the feedback, I will definitely use this in future projects!

  If you don't mind, I do have a question. In this case, where all headings are of the same importance, would you use an h1 for the 'Sedans' section and h2 for the 'suvs' and 'luxury'. Or would you use h2 for all 3 of them? I guess the problem then would be that there's no h1 at all..

  Thank you for your help!

  -Tamar

  0
• 

  Akhlak Hossain Jim•1,325

  @Akhlak-Hossain-JimPosted over 2 years ago

  Nice work. For that you can do:

  1. set a fixed bottom padding,
  2. take a div with display: flex; for p and the button and
  3. make flex-direction: column; justify-content: space-between;

  or

  1. in section add display: flex; flex-direction: column;,
  2. select img and add width:64px;height:auto;
  3. in button add margin-top:auto;

  and it should always stay in the same position.

  Happy coding :)

  Marked as helpful

  0

  ---

  

  Tamar•80

  @ttaammaarrPosted over 2 years ago

  @Akhlak-Hossain-Jim Hi Akhlak,

  Thank you so much for the suggestions! Option 2 worked like a charm on my local device, though not on GitHub pages, I'll definitely look into that further, but you helped me greatly. Thank you!

  -Tamar

  [edit] Scratch that, it does work! just took some time to load the new page :)

  1