1st Project - Order Summary Card (Built with Atom)

Community feedback

• 

  Patryk Besler•355

  @beslerpatrykPosted about 3 years ago

  Hey Avedi 👋

  Awesome job, you are doing great. There are, however, few issues that you should work on.

  Responsive units - when working on a project it is a good practice to make sure that the page you are coding looks good on both small and big screen devices. Usually, it is not recommended to define position properties such as the bottom, left, etc. using definitive values. Next time try using percents. You can read more about responsive units here: https://gist.github.com/basham/2175a16ab7c60ce8e001

  I would also recommend you to check out some articles or youtube videos about the mobile-first approach. It might help you with the workflow especially at the beginning of your journey.

  Hope that some of it were helpful. Keep up the good work and good luck on your future projects!

  Marked as helpful

  1
• 

  Андрій Рогов•1,155

  @Andrii-RohovPosted about 3 years ago

  Hey, try to delete these props {position: absolute; top: 50px; left: 500px;} from .landing-page and add those instead {margin-top: 100px; margin: auto; min-width: 400px; max-width: 600px;} for start. And try add to body { background-size: cover; or maybe contain;} see how it will affect it

  Marked as helpful

  1

  ---

  

  Андрій Рогов•1,155

  @Andrii-RohovPosted about 3 years ago

  @Andrii-Rohov also delete position {position: absolute; top: 680px; left: 500px; } from .attribution and add {margin: auto; margin-top: 15px;} and in future try to use { width: some%; margin: auto; }

  Marked as helpful

  1

  

  Андрій Рогов•1,155

  @Andrii-RohovPosted about 3 years ago

  @Andrii-Rohov and one last thing, try toadd {cursor: pointer;} on button:hover it will change mouse to little glove-thingy. Yeah, but nice work overall, keep it up👍

  Marked as helpful

  1

  

  Avedi•20

  @AvediMusunguPosted about 3 years ago

  @Andrii-Rohov This worked beautifully thanks!

  0

  

  Андрій Рогов•1,155

  @Andrii-RohovPosted about 3 years ago

  @AvediMusungu you're welcome)

  0
• 

  devjakov•210

  @devjakovPosted about 3 years ago

  this is not responsive unfortunately, the sizing keeps changing and only looks good on mid screens, above 1080p breaks and under 500p it breaks as well

  The width and the height of the container need to be a fixed size

  Marked as helpful

  0

  ---

  

  Avedi•20

  @AvediMusunguPosted about 3 years ago

  @devjakov Yeah - that's what i need help on.

  Any specific code you can use as an example for me?

  0

  

  devjakov•210

  @devjakovPosted about 3 years ago

  @AvediMusungu you can take a look at my solution, cheers

  0