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 Apr 7

How do you deal with burnout and low motivation?

The past few months have been a no-code zone for me. I've literally gotten noth...

READ POST
Follow @rjpsyco009 to see more of their posts in your feed.
Alex Carpenter
I’m a front-end developer focused on performance and accessibility.
More from @hybrid_alex
Center an element with CSS Grid
#css
5 tips for styling the component layer
#css
Trending on dev.to
Redesign of my portfolio
#showdev #webdev #career #frontend
How to start contributing to open source as a junior or newbie?
#discuss #beginners
How do you shift between the coding mindset and other head spaces?
#discuss
If you don't hire juniors, you don't deserve seniors
#career #management #recruiting
We need a post-inbox era therapist
#google #discuss #productivity
How to create properties from variables in JSON (Part 1)
#javascript #json #howto #properties
Three neat CSS features
#css #devtips
How to make CRUD operations in JSON (Part 2)
#javascript #json #howto #crud