Product review

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • To center you content to your page, add the following to your Body Element:

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

  • For this challenge you want to use the Picture Element not the Background Image Property. The Background Image Property is mainly used on decorative images

  Picture Element will allow your to switch between images in different breakpoints and makes your site load faster by saving bandwidth.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:

  https://www.w3schools.com/html/html_images_picture.asp

  https://web.dev/learn/design/picture-element/

  • Delete* the Section element and replace it with a Div.

  • The Header element is not needed for this challenge.

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  Marked as helpful

  0

  ---

  

  Keith N•110

  @KeithLionPosted about 2 years ago

  @vcarames I'm struggling to get the source image to show. The element only shows what's in the image tag and doesn't let me import an image for the source, but I am going to keep playing that. Most likely in code pen until I get it then integrate the element. Thank you for the feed back.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @KeithLion

  Since you built you component desktop first, change the min-width to max-width in the source element.

  0