Why does codepen require to include display:block to make an image responsive but freecodecamp or W3 schools don't say that it's required?

HTML-CSS
1

Free Code camp’s new curriculum doesn’t use display:block while making an image responsive

2

it also requires to be centered in its own parent element, if I remember correctly

1 Like
3

yeah. I centered that using: text-align: center in the parent element and passed that test.

But even if I remove that and just add the code that’s given in the link above in free code camp for responsively resizing images, it still doesn’t work.

4

Hey,

If you give it a percentage width, then the image will be responsive. It’s not strictly necessary for it to be a block element.

The reason why display block is set is because normally there will be text sitting besides the image. And text align center won’t work as you expect in that case. So display:block and margin:auto are normally used.

If you wonder why text align center centers the image, it’s because the default display is inline, but the width property is, let’s say, an exception to inline elements (images are inline-replaced elements)

Does this help?

1 Like
5

Thank you for taking the time out to reply. Yes it helps but still confused with the last line about inline elements inline-replaced and all. Free code camp should have talked about these in their tutorials that is inline, block etc Might have to google search the terms inline-replaced and all

1 Like
6

Yes, I know it’s sometimes frustrating, it happened to me as well. But remember this is a free platform, and partially built by users (you can raise a feature request on github, for example).

For the moment, whenever you have a doubt, ask in the forum, or you can message me too.

Now regarding how to understand this topic, I’d say this: forget about google. Write a codepen and play with the display property, using background-color to guide you visually. If you need you can google afterwards, but I believe it’s something you will solve on your own.
And maybe take this idea while playing with the code:

In the web everything is a rectangle: letters, elements, images. You can add some shape-effect, but under the hood all is a rectangle (lol: see this quote’s background).

1 Like
7

Thank you. I will do that that is experiment myself with code to understand better.