Responsive site built with FlexBox

Community feedback

• 

  Kristina Radosavljevic•380

  @KristinaRadosavljevic

  Posted almost 3 years ago

  Hi @Attrams, congrats on your solution, it looks really good :)

  As for your question about the button getting bigger on hover, that happens because you're adding a border on hover, so that expands the whole element by whatever is the width of the border. Since the background color on the inactive state is the same as the border color on the hover state, I guess the simplest solution you can try is to add the border for all states (not just on hover).

  Another tiny suggestion I have is to maybe put a smaller margin on the .container element in mobile view - as it is now, I think the container starts to shrink a bit too soon and gets very narrow on mobile. This might be just a personal preference :)

  I hope this helps and once again, really good job on this challenge :)

  01

  Marked as helpful
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello @Attrams, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  Your solution seems fine, you did a really good job wrapping the content for these 3 cards. Something you can improve here is to use a single class to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.

  Instead of using ID to give style to your elements, use CLASS that’s better, note that with id these styles are not reusables, so prefer to use ID forms and Javascript and CLASS for styling.It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again.

  ✌️ I hope this helps you and happy coding!

  01

  Marked as helpful