Issue with "Recipe: Media objects": (short summary here please)

[NitschkeM]

MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects

What information was incorrect, unhelpful, or incomplete?

The css 'code' contains style rules which does not match any html elements.

Specific section or headline?

Under headline: The Recipe.
Scroll down to bottom.
Copy Code --> This is the code this post refers to.

The css code includes the following style rule:
.media-flip > .media {
grid-column-start: 1;
}
But no html markup matches the selector list.
There are no elements of class .media that are direct children of an element of class .media-flip.
I.e. the code does nothing - as far as I can tell.

What did you expect to see?

I would expect the css selectors to match some html markup.

Did you test this? If so, how?

Deduction from my limited understanding of html and css.

Induction including the following observations:
I observed the page in action in a browser with the code in question active.
I then commented out the code and observed again.
I could not see any difference between these two observations.

MDN Content page report details

• Folder: en-us/web/css/layout_cookbook/media_objects
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/layout_cookbook/media_objects/index.html
• Last commit: 07da89b
• Document last modified: 2021-02-24T02:44:23.000Z

[rachelandrew]

I'll take a look, also those code examples are all displaying in very small iframes so I'll sort that out too!

[NitschkeM]

Cool cool, good luck =]

[rachelandrew]

This is fixed - thanks for reporting it, I think that was some redundant code. I've also made a PR above to sort out the squashed demos so they should be easier to read once it is merged.