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!
[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 Feb 24

What little things make you happy while coding?

I must say refactoring code to make it look beautiful is my guilty pleasure ...

READ POST
Follow @gonzalezanguita 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
How to implement a button loading state with CSS
#css
Three tips for writing better CSS
#css
Trending on dev.to
What are your programming blogs?
#discuss
When is code "too clever" / how do you think about readability/cognitive load?
#discuss
Which contentious opinions in programming actually matter?
#discuss #webdev #programming #grannyrulescomments
What are the first differences you noticed in GitHub after Microsoft bought it? Post here yours!
#github #microsoft #discuss
Follow Friday!
#discuss
What's your approach to fixing a "long-term" hairy bug?
#discuss
Does anyone else feel bothered when people term us as coders instead of developers or programmers..?
#discuss
How do you get a decent estimate on the time it will take to complete a task?
#discuss #work