Is it possible to create a full width row in WordPress’s editor window? [closed]

by

Is it possible to create a section that is full width using only WordPress’s editor, including the CSS editor? (not including using a 3rd-party plugin)?

Edit: The info below was intended to demonstrate that I’ve done my research. I know one can edit PHP or CSS files to achieve the desired result, I am interested in working within the native parameters of WordPress.

Using the web inspector in Chrome, I can see that any content I put in the editor window belongs to div class="entry-content", but I want to place a one-line (text) banner on the front page that spans the entire screen–wider than the entry-content area, which means overriding the div class="entry-content" settings.

Here are some of the things I’ve tried:

  • Add a unique div class (“banner”) in the backend (“Text”) editor and then add .banner: 100% in WordPress’s CSS customizer;
    I
  • In the Customizer, added:
    .banner {
    position: absolute;
    width: 100%;
    left: 0;
    }
  • Tried to modify header.php with .banner: full-width;

Is it possible at all to create content not constrained by the CSS specifications for the body of text a user can input using WordPress’s editor (in my case, the class is entry-content)?

Currently, I am experimenting in WordPress theme TwentySixteen.

1 Answer
1

One way of doing that is to do a little bit of clever CSS hacking 😉

Here’s the solution by Sven Wolfermann (codepen)

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Leave a Comment