Im stuck on the tribute page. dont know where to insert my style tags?

img{ max-width: 100%; height: auto; } do i insert in html mode or on css field? Im new at coding and everytime I place my code it makes my whole tribute page go blank...help I got 8/10 so far on the tests. And I cleared the image test but i cant see my image?

Hi there. Styling belongs in your CSS, not the HTML.

You can place it either in HTML within the style tags.

<style>
</style>

You can also do it in an external .css file and then access it inside the head using the link tag.

<link rel="stylesheet" href="yourFile.css">

I suggest going with using an external file since it improves overall readability and helps manage your code.

You must be doing this in codepen? If so they have already provided you with a place to write css and that should suffice. If you are having troubles, send the link to your codepen project here and we will be glad to help :slight_smile:

1 Like

thank you! let me try out your suggestions and Ill be back.

Here is the link to my codepen. I inputted the code style into CSS and its still not passing through. Idk what Im doing wrong.

I suggest reading the error. It asks you set display to block. Also remember the fit-content property? Use it for your width.

Should fix one of the tests. Many people have this problem. This is just my opinion . (Note: - This should be done in the existing img css tag)
Or remove the unwanted <style></style> tags in your css and use margin:auto.

You do not need <script> tags when using the CSS section in Codepen. That is the real issue here. Keep the rest of it as is and it will pass the image responsiveness test. As for the centering issue, what have you tried so far? Giving answers outright is discouraged here.

To pass the second test which went wrong I suggest you wrap your image element in a <center></center> tag .

The test seemed to pass then.
The center tag helps center your image.

1 Like

That is not best practice. The <center> tag is deprecated. Styling belongs in CSS, not HTML.

2 Likes

Right. I didnt know it was deprecated though.

In that case I would access the img element from the parent div and set the display to block and give margin a value of auto.

The selector can remain as img. All that was needed was for the <script> tags to be removed and to add margin: auto. That’s it.

1 Like

Deprecated doesnt mean its bad always. It just might be removed later.
I suggest reading this debate-like stackoverflow question. Im not saying I support the use of center. It certainly is better to avoid tags that have a chance of becoming invalid but center does get the job done easier than using a lot of css . It might be good for small projects - just to center a single element with a center tag would be a lot easier than working your head around the css(esp. for a beginner) .IMO, Centering in css can depend on the situation . Anyways, im no expert so I might be naive in what I say. Honestly though, I’ve never used center tags till now. I’ve seen that a lot of major sites including google still use the center tag.

1 Like

This topic has been in debate for a long time.

The center tag was deprecated back in 2004 and is still in use today. Im not advocating its use but just because something is deprecated doesnt mean it cant be used or that it should thrown away. It could be removed at any time but, will that ever happen? It been how many years? … Yeah right, around 17 years since it was deprecated and is still widely used today.
The people who decide on the future of JavaScript are the big companies themselves(including maybe a few individuals from different orgs) .The fact that it still exists after being deprecated so long is proof that they dont plan on removing it soon. I know that deprecated tags can still be used (maybe) but all the major browsers still support it.
[BTW , there are A LOT of deprecated tags still used.]

Styling is definitely something CSS does. But seriously… you can also style stuff with SASS, Bootstrap, etc .
Nowadays SASS is way more recommended and common for developers to use.[Do note that SASS complements CSS and CSS is something everyone should know, just wanted to say its not the ONLY way :- ) ]

I personally agree that deprecated tags should be avoided when you consider compatibility . In the end, my point is that as long as something’s working I dont really find any harm in using it ; ) The only other reason not to use it is so that noone will hate or shout at you for using it lol .

1 Like

I just feel like adding my thoughts on this, this was because the exercises in freecodecamp specifically taught how to center an image.

first an image is an inline element and css moves specifically block elements to the center except it’s a text which you can then use text-align

This can be done by making the img a block element

img  {
    display: block;
    margin: auto;
}

This should work for the image.

img{
  max-width: 100%;
  display: block;
  height: auto;
  margin: auto;
}

I modified your code by adding the margin: auto; if your copy and paste it in your pen your image should be centered now.

Rather than providing the answer directly, it is always encouraged to help the user understand how to do it.
Also, the previous users have already discussed and put the answer , I dont see why they have to be repeated again by different individuals.

I guess I explained before putting a visual representation out there. All was a form of explanation. If I shouldn’t write codes why is the “Preformatted text” there when typing a reply

You may use the performatted text to help others and maybe give the format of how-to-do-it.
Just giving the plain answer outright is just ridiculous.
At least mark it using a spoiler tag .
I didnt say this to hurt anyone.

Whats the difference? If you provide whats missing, the user will have to TYPE it out (in most cases), while if you provide the full block of code, the user will have a greater urge to just copy/paste it (im not saying this of my own , search it up if you want to) , when compared to giving just giving whats missing.

Another use of performatted text can also help point out typing mistakes (typos) etc…

The first post you sent here was in the right direction (though others have already answered it. )
Atleast spoiler mark your code and then forget what I said : )

Cheers :v:

2 Likes

Okay thanks for the advise and also letting me know about the spoiler tag, would do that next time