Html and Css

Community feedback

• 

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  Hello, 👋🏻 edshuli. Well done my friend 👏👏👏. Lovely job on this challenge, place properly the background image is quite tricky.

  Just a suggestion in my humble newbie opinion. 😊

  I've been checking your code, I would approach that, like so.

  • I think you can avoid those media queries. Having a wrapper, wrap card, and card-bottom, and in your CSS, I would do this to center the card.

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

  • It would still not be fully centered, so you have to remove the margins from the card.

  • To position the background-images properly and make them responsive, I would do this on your CSS body.

  background-position: right 50vw bottom 50vh, left 50vw top 50vh;

  • Add an alternative text to your images.

  <img src="/images/image-victor.jpg" alt="victor crest">

  • The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). And you have more than one with the same name.

  I hope, it helps.

  Happy coding🧑‍💻

  1

  ---

  

  Edna•10

  @edshuliPosted almost 4 years ago

  @RenszCamacho Thank you very much for your suggestions. All were very helpful really. As you said setting the background image can be tricky. I also have another question, how do I know which viewport to choose exactly ? Because I do that on developer tools from google and the width is the same as they ask but they height is unknown. Can you give me some tips on that ?

  Thank you in advance.

  0

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  Hi, @edshuli.

  I don't think I understand your question well. how to know which viewport to use? It depends on what you want to do. In this case, I think that type of measurement is useful since it will always be based on the measurements of each screen.

  I have seen other types of solutions, and set them a position: absolute, and leave them fixed in each corner of the screen.

  Regarding your question, my thought was, set the background-images in the CSS. And we could say that the two circles were centered on the screen, then I knew that I wanted them to be responsive, and I had two options: use the percentages or the viewports.

  In the end, I decided to use the viewports, from what I said at the beginning.

  So the bg-top, I wanted to push it to the left, that's why I put right: 50vw, then up, bottom: 50vh.

  And to the bg-bottom, push it to the right, left: 50vw and down to top: 50vh.

  I have deployed your code with the suggestions so you can see it. Because I have the feeling of not having answered your question. 🤦🏻

  Here is the link

  0

  

  Edna•10

  @edshuliPosted almost 4 years ago

  @RenszCamacho Thank you very much for your suggestion really. I will keep that in mind really.

  0