Question about HTML/CSS assessment

Learning Challenge

I am having trouble with two different things. The first problem is that I cannot place the secondary text under the title. The second issue is that when the screen is shorter than 599px, my images lose all formatting.


For my first problem, should I place secondary text under the same div as the title? When I tried doing that, then the problem was that they are not supposed to have the same color. How could I handle that issue?
For my second problem, should I copy and paste all the formatting I wrote for media screen longer than 600px onto my media screen for shorter than 599px?

What I’ve tried

I have tried a great many combinations, I have browsed this forum for answers and I have tried using flexbox formatting without success.


Here I have screenshots from my code for the html file and style.css.

And here I have pictures of my output:
First the output when the screen is longer than 600 px:

And the output when the screen is shorter than 599px:

I have fixed my second problem by simply doing the copy and paste of my own code over to the shorter screen.
My only issue now is that I cannot seem to have the Title and the secondary text to the right of the avatar.
Any help would be greatly appreciated. Thank you!

I did some trial and error, submitted it and passed. Thank you!

Congratulations on the pass!

There is quite a bit of detail involved in styling that card! Sounds like you took a great approach of making small changes and testing it out in the browser until you got the styles you were looking for.
On to the next assessment - you are one step closer!