Mobile First Workflow with plain CSS and JS

Community feedback

• 

  Abdul Khaliq 🚀•72,460

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

  ---

  • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

  ---

  • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

  ---

  • For this demonstration we use css Grid to center the component.

  body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  @media screen and (min-width: 50rem) {
  .main {
  margin-top: 20vh;
  }
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  christopher II•1,220

  @donchriscorleonePosted over 1 year ago

  @0xAbdulKhalid This is helpful, thanks!

  0
• 

  Saad Hisham•1,750

  @Saad-HishamPosted over 1 year ago

  Awesome job✨ on your work so far! I just wanted to offer a friendly suggestion to improve it further.

  In my opinion, the box shadow looks a bit too dark compared to the design. To fix this, you might want to try adjusting the values in the CSS code. Here's an updated code snippet that you can use:

  .main {
  box-shadow: 4px 4px 10px 0px rgba(229,233,244,0.5);
  -webkit-box-shadow: 4px 4px 10px 0px rgba(229,233,244,0.5);
  -moz-box-shadow: 4px 4px 10px 0px rgba(229,233,244,0.5);
  }
  

  This code should give your box shadow a softer and more subtle look, which should be closer to the design you are aiming for.

  Keep up the great work🔥

  Marked as helpful

  0

  ---

  

  christopher II•1,220

  @donchriscorleonePosted over 1 year ago

  @Saad-Hisham Yeah, it is a bit dark, thanks for this!

  0