Responsive Recipe Web Page

Community feedback

• 

  P

  Kellen James•350

  @Kellenkjames

  Posted 8 months ago

  Overall, I think the semantic markup and organization of the code is great. However, I think a little bit more time can be spent on fixing a few areas to get the solution looking closer to the design.

  One example would be your main container. I notice you're not setting a max-width on this container which should be 736px according to the design.

  Because there is no max-width set, your image is much growing larger than it should since it's basing it's dimensions from the parent container.

  Example | Line 35 in _base.scss

  main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.5rem;
    width: 50%;
    margin: 5rem auto;
    padding: 2rem;
    background-color: $white;
    @include border();
    max-width: 736px /* Adjust to REM value */
    ...
  

  Making this adjustment and a few others will get your solution looking even more clean and professional. Hope this feedback helps and keep up the great work!

  00