Not sure how to phrase this question. Let me paint a simple Wordpress setup for single.php:

<div id="container">
   <?php the_content(); ?>

But what if, inside the_content(), I want the users to be able to use more advanced page layouts that break outside of the #container? For example, let's say the #container is 1140px wide but I want a blockquote on a page to be 100% width (of the browser)?

Here's a theme that does what I want to do: http://cedarwp.ecko.me/design-patterns-introduction/

Notice how the black bar is full width and would have required html tags to achieve the look.

I think I can do this with shortcodes but that doesn't sound very flexible. Please advise!


About the link you provided

The black bar is part of the .pagewrapper but there is no width specified for pagewrapper.

.pagewrapper {
  left: 0;
  position: relative;
  transition: left 500ms ease-in-out 0s;

The post content is set a max-width: 700px, it will not extend the boundary.

.wrapper {
  margin: 0 auto;
  max-width: 700px;
  width: 90%;

The black bar is entirely new section which has this code, no width set for it:

.postcontents.dark {
  background: none repeat scroll 0 0 #2c2e32;
  color: #e2e2e2 !important;
  padding: 90px 0;

There is a CSS specific solution.

If you need to use the block quote which is 100% of the width, you need to make it come out of the normal flow of the #container.

.blockquote {
  position: absolute;
  width: 100%;
  left: 0;

Blockquote within container Blockquote within container

Blockquote outside the flow Blockquote outside the flow

A better solution will be to create a custom class called blockquote-full-width and allow the users to use it.

  • But then the absolutely positioned item would cover content. For example, in your screenshots, you've block the downvote arrow. – shrm03 May 20 '15 at 14:17
  • That's because, the blockquote is in parallel with downvote arrow. In the link you have mentioned, there is nothing in parallel. The blockquote is not fixed, it will not block unless there are other elements in the line. – Manoj Kumar May 20 '15 at 14:22
  • I'm still trying to understand how the link I provided is achieving the effect. I used Chrome's inspector and they aren't using absolute positioning. They've somehow divided different parts of the post into separate sections. That's the effect I'm trying to mimic/learn how to do. – shrm03 May 20 '15 at 14:32
  • I have edited the post on how the structure in your link is. – Manoj Kumar May 20 '15 at 14:44
  • Thanks for the elaboration. I guess the remaining question is, how do I get my Wordpress posts to be separated into so many sections? How could a user of my theme do that? For example, the linked post has 6 <section>s and 1 <div> inside it. How do I achieve that? – shrm03 May 20 '15 at 15:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.