Responsive page using display flex, picture tag to alternate images

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Jonas, well done on completing this first challenge!

  I think the reason why there's a white space under your image in the desktop view is, the img needs a display: block added, and also right now your two columns are not the same width, even though they should be, and so the contents in the text box are just filling out the available space as they should be, except that space is more than the image's height. The best way to add display: block is to follow what @DavidMorgade said regarding using a set of reset or normalize style rules. In case there's still a white space after adding display:block, since you're using flexbox here, try adding a flex: 1 0 50% to your picture selector. This declaration tells the container to not shrink (that's what 0 is) but to stretch to the desired width if possible (desired width being 50% of the parent).

  Hope you get it sorted, and a warm welcome to you for joining the Frontend Mentor community!

  Marked as helpful

  2
• 

  Jen M•130

  @jenmurph4610Posted over 2 years ago

  Hey Jonas, nice job!

  I had the same issue with the white space under the image. Some google searching brought me to this article that explained and helped me with it: https://www.tutorialrepublic.com/faq/how-to-remove-white-space-under-an-image-using-css.php

  One other tip, I see you have the word 'perfume' spaced out in your HTML. You can also use the letter-spacing property to accomplish this in the CSS and control how much or little spacing in between.

  Marked as helpful

  2
• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello and congrats finishing the challenge!

  To add a bit to Sam's answer, consider centering your component in the middle of the screen, using flex on the body, you can do something like this:

  body {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  

  Also consider using a browser style reset, for example Normalice.css this will get reset the default browsers styles (for example, the margin in the body), every browser has his own styles, so it's better to just get rid of them!

  Hope my feedback helped you!

  Marked as helpful

  2
• 

  Sam•230

  @samd1aPosted over 2 years ago

  Hi Jonas Felix de Souza, congrats on finishing your challenge it looks awesome!

  To answer your questions:

  1. I see you already tried using the height property, however if you changed it to height: 100%, the image would fill up the div. the image stretching to fill can be resolved using object-fit: cover
  2. I would use display: grid to make both columns have the same width: grid-template-columns: repeat(2, 1fr);

  Hope this helps a bit!

  Marked as helpful

  2
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Fala Jonas, beleza?

  Dei uma olhada no seu código aqui e está muito bom, eu só mudaria duas coisas:

  1.Ao invés de usar id como seletor, seria melhor você usar somente classes para coisas relacionadas ao estilo do componente, geralmente id é usado só para formularios e coisas relacionadas a JS.

  2.Seria uma boa adiciomnar uma margin envolta da div que segura o conteudo, desse jeito você evita o componente tocando as bordas da tela.

  O resto está top.

  0