@AdrianoEscarabote
Posted
Hi Faris Thibani, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
To center the card in the center of the screen, we can use flex-box
, like this:
body {
display: flex;
align-items: center;
justify-cotent: center;
flex-direction: column;
}
To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:
-
Add a
background-repeat: repeat-x;
, the image will repeat on the horizontal axis, preventing it from breaking. -
Add a
background-size: 100% 50vmin;
, the50vmin
will set its height as the page target, and100%
will make it stretch on the horizontal axis.
Feel free to choose one of the two!
The rest is great!
I hope it helps... 👍
Marked as helpful
@Faris-Thibani
Posted
@AdrianoEscarabote Dear Adriano, Good Thank you. The feedback is great. Hi, I'll try to implement the code. I have never used these background-size rules. Happy to learn new stuff. Have a good day.
@AdrianoEscarabote
Posted
@Faris-Thibani happy coding!!