HTML/CSS Pre Assessment

Hey guys! I had some questions on the Pre HTML/CSS assessment, specifically the picture card. How do you move the Title, Secondary Title and the Body Text next to the picture of the Avatar? On my page it appears on the bottom. Do you use display:flex and then some command? Or do you use CSS grid layout?

remember that your html assessment should look SIMILAR to the example. It does not have to match exactly. If the assessment does not call for those elements to be next to the picture of the Avatar, it is best not to go out of your way to make it so.

I have been stuck with the card/title/avatar configuration of the HTML assessment for the past two days. I’ll figure out how to configure certain things, but never how to execute the instructions as they are written.

Take a look HERE

Any advice on how to proceed?


I noticed the src for your images seems to be missing the path to images in your directory. try. adding “images/…” to the beginning of your src image pathway like “images/desert.jpg”

I also noticed your media screen is set to min-width. The instructions say… is 600px wide when the screen is greater than or equal to 600px wide" meaning we dont want the form stretching past 600px when the screen is greater than 600px so try changing your media screen to “max-width”

Not sure if you are still working on this, but I got it all lined up using the grid layout. I, by pixel, moved the grid squares where they needed to be so that everything looked nice. There might be an easier way to do it? But it worked fine for me.

That really helped, and got me on the path to finishing.

Thank you !

1 Like