flexbox , media queries for responsive design

Community feedback

• 

  Reuben👾•560

  @RubylenshyPosted about 2 years ago

  Hi, @mohamedshawgi 👋 Congratulations on completing this challenge. Here are a few tips to improve:

  • On this declaration .sedan,.suvs,.luxury{height: 80%;}, that height would give you an offset height which I think would get too big at some point. You could just add padding to the cards .sedans, .suvs, .luxury{ padding: 40px; } Hence you won't need this { height:auto; max-height: 650px; }
  • And your .container could be position centered just like .container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } Hence, the {width: 55%;} wouldn't matter

  Note: This might not be a perfect correction but it could guide you

  Great Work @mohamedshawgi, Keep Coding

  Marked as helpful

  0
• 

  Kartar Developer•360

  @kartardeveloperPosted about 2 years ago

  Hey Mohamed Shawgi, You did Great. But as you said you need more improvements to achieve the design you want. And if you need some improvements I will help you with this. Here are some suggestions -- 1). First of all you can use max-width and width CSS properties to give as much width as you want and if you use max-width it will also help in making our webpage responsive. 2). Next, if you want to center your entire card, then you can use display: flex; align-items: center; justify-content: center; properties on your card's parent element. That is the one way. Another way is a little bit complicated if you want to know that you can comment to me, and I will definitely answer it and help you in improving your skills. 3). You can use the cursor: pointer; on your buttons so that the user can easily catch it. This will increase the overall user experience on your webpage. And you can use the same font family on your button so that it looks beautiful as our other content looks. 4). You can use the grid on your main container instead of flex because we are creating a layout there. And grid helps you in creating the most appealing layouts. But if you want to use flex then you can it's not the big issue. But in flex you need to add width in its child elements, in the grid, we don't need to do it. 4). Last but not least spacing in your cards. You can decrease this by using simple padding properly on your cards. Everything else is looking good. I hope this will help you. If you find this comment helpful for you, then you can mark this as a helpful comment. It will increase my confidence. 😊 And If you need any help then I'm always there.👍

  Marked as helpful

  0