@RenszCamacho
Posted
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🧑💻
@edshuli
Posted
@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.
@RenszCamacho
Posted
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. 🤦🏻
@edshuli
Posted
@RenszCamacho Thank you very much for your suggestion really. I will keep that in mind really.
