(solved) CSS tribute page image resize

Hi ppls,

I’ve read through the help section regarding to this issue, and made various adjustments but have unable to make the image resize.

Here is my code: https://codepen.io/Lozzaxueba/pen/JjNemvb

Could you also tell me why my code doesn’t work, when you guys fix it.

I’ve only just started so its only CSS code, I notice other people are doing a hybrid html+CSS code.

Thanks in advance.

Hi @lozzaxueba !

Welcome to the forum!

A few things. :grinning:

You are going to want to separate your html and css.
When you start building larger projects, you are not going to want to keep everything in one file.
That’s just going to be messy.
You want to start practicing by placing your html in one place, css in another and eventually javascript in another.
It is called separation of concerns. :grinning:

Once you get rid of the style tags, move all of your html to the html section and move your css to the css section you will notice that the error message will change.

Open up the the test suite to read the new error message.
Always read the full errors messages.

Then once you fix that error you should get 9/10.
Open up the the test suite to read the new error message.

Sidenote: you have a few errors in your html.
Run your code through the html validator

Hi @lozzaxueba !
First of all the code is HTML not CSS.
Your Doctype and everything in main is supposed to be in HTML section.
And the code inside style is all CSS. You don’t have to create a stylee because you have to put all the style code in separate CSS section.

I can see you did everything. :smiley:

Thanks for your prompt response and welcome!

Lol (facepalm) didn’t realise CSS and html weren’t meant to be on the same page.

Unfortunately the html validator can’t validate the page, i used https://codepen.io/Lozzaxueba/full/JjNemvb for the URL am I pasting the wrong address?

Thanks

You will need to click on validate by direct input, paste your code into there and click check.

You can ignore the error message for the head element.

Haha thanks for your help and tip. I made the changes that you and jwilkins have suggested but the test still doesn’t allow me to pass, however the image did get resized.

Still tinkering : )

You have to set display : block

@mrohanrajput has pointed out one of the things you have to do.
But it still won’t pass.

You need to keep opening up the test suite and reading the FULL error messages to pass.

And the last thing, you have to align image in center, try using margin for that.

Thanks for pro tip

That helped me with what was going on the format!

Thanks buddy! All done, that Margin tip got me finished!! Woot!

1 Like

Thank you all!

Please close the thread, going to have to do alot more to get used this robot language thing rofl.

Kudos to both of you! :partying_face: :partying_face: :partying_face: :partying_face:

1 Like

We usually don’t close threads unless absolutely necessary.

You can just mark it as solved and no one else will join the conversation offering to help.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.