I'm puzzled by a couple of things.
I used the display: inline-block property so that the div that holds my image fits into it but it doesn't seem to work (desktop view).
I use the media query to adjust the flex-direction of the <p> elements for the desktop view but it's not applying it. Why is that?
The style guide provides two fonts. I'm not sure where the Lexend Deca 400 is used.
Any help is very much appreciated!
Question 1:
You can remove the inline-block from the image wrapper element and then set the img to have:
height:100%; width:100%; object-fit: cover;
or you could switch display:inline-block to: display:flex to the image-container and then make the img:
flex-grow: 1; object-fit: cover;
and remove the max-width:100%
This will resolve the sizing issue of the image. essentially in this case, I believe you want your image to always be the full width and height of the containing div and to use "cover" to "resize" the image.
Question 2: After a quick look, you should apply "display: flex" to the .stats class and not the p tag in the media query.
you can then add
gap: <xx> px / rem etc to the .stats class to spread them out.
You'll also need to override some of the other classes in the media query to left align the other elements and to add some extra padding.
Hope this helps.
