How to break elements outside of their container with CSS

View the source files on Github.

Did you find this post useful? Show some love!
DISCUSSION (2)
[deleted]

Hey Gilvando, not sure I follow your question exactly, does this make sense below?

CSS:

// These styles will only be applied to the child elements
// not the grandchild
.c-article__content > * {
  margin-right: auto;
  margin-left: auto;
}

Markup:

<div class="c-article__content">
  <p>...</p> <!-- child -->
  <p>...</p> <!-- child -->
  <figure> <!-- child -->
    <img src="" alt=""> <!-- grandchild -->
  </figure>
  <p>...</p> <!-- child -->
  <blockquote> <!-- child -->
    <p>...</p> <!-- grandchild -->
  </blockquote>
  <p>...</p> <!-- child -->
  <p>...</p> <!-- child -->
</div>
Classic DEV Post from Aug 9

A medium sized read about large sized loneliness

A quick review of how difficult being without a community can be

Alex Carpenter
I’m a front-end developer focused on performance and accessibility.
  1. Read Post πŸ€“
  2. Follow Author πŸ‘‹
  3. Profit??? πŸ€”