@Karag2006
Posted
Also from me Gratulations to your first Project.
I totally agree with the Centering above. Even if you did not learn about grid yet, just use those 3 lines and learn how it works for more complex stuff at your own time.
I like that you used basicly only 4 html tags. and i tried to make the picture work without changing that or introducing any advanced things. And this should fix your picture:
- replace
img { height: 50vh; border-radius: 10px; }
with:img { width: 100%; border-radius: 10px; }
- remove the media query alltogether or if you want to use it change it so it does not make the component bigger then the screen is at that time.
for example you could safely change it to
@media screen and (min-width: 500px) .container { width: 400px; }
The Challenge works perfectly fine without media query though.
Thats it, now the picture stays where it should and you still only use 4 elements on your solution.