CSS flexbox and BEM methodology

Community feedback

• 

  Jonathan•105

  @JonMStevensPosted about 3 years ago

  Hey this looks good so I'm just going to point out some small details about the button links that you could look at if you want.

  1. the hover states look to be sharing a few style properties. You could group these in one selector that they share so that you can easily change them all at once. The selector could be something like ".container-columns a:hover {" and contain all of those shared properties.

  2. the hover states seem to overwrite some of the properties on the anchor selector, even though they aren't changing the value. For example the anchor selector and the hover selectors both have: height: 47px; width: 150px; You don't need rewrite those properties.

  3. On hover the borders on the buttons seem to pop into place suddenly at the end of the transition. In my opinion this could look smoother if: they weren't included as part of the transition, and instead the transition was something like "transition: 500ms background-color ease-in" so only the background-color was part of the transition. OR you could outline the buttons with something that isn't part of the box model and won't take up space on the page like a box-shadow.

  Hope this is helpful, and thanks for your response on my project.

  Marked as helpful

  0

  ---

  

  Ramiro Solano•35

  @ramirishoPosted about 3 years ago

  @JonMStevens Thanks for your recommendations, you helped me a lot :)

  1
• 

  Erick F. Felix•265

  @efs0-cod3Posted about 3 years ago

  For the html issue you should have you div’s inside a main tag (landmark).

  Looking pretty good on desktop view.

  0

  ---

  

  Ramiro Solano•35

  @ramirishoPosted about 3 years ago

  @efs0-cod3 I created a main tag, it is the div with the class "container", at the end of the <a> tag is the closing tag of your div, maybe you did not see it, I will correct that error. Thank you very much. 8)

  0