Categories
Code

Hassle-free Full Bleed

Dave wrote this the day I went to Vegas and I haven’t had time to write about it.

Let’s say you’re making a blog post layout. Content is entered into a CMS inside a WYSIWYG editor field. You echo that content to the page. You pull it up on a mobile device and notice the paragraphs go edge-to-edge. Yikes, it’s a little uncomfortable. So you add some kind of left/right padding maybe using a div.container.

This works great until the client asks for the images and video to go full bleed. Your universal padding solution no longer works well.

Uncle Dave’s solution for this is pretty great. Visually, this is the type of layout I wanted for this site. So in an exercise of self-shame, let’s look at the selector that makes it all work!

h1,
h2,
h3,
h4,
h5,
ol,
ul,
hr,
.post__header,
.post__footer,
.post__entry > p,
.search-results-list > p,
.page__entry > p,
.highlight,
.extendout figcaption,
.footnotes,
.pagination,
.site__footer small,
.author,
.fullwidth,
.page__search {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  @media #{$large-up} {
    width: 65%;
  }
}

Ugh! What the hell is this Tim? Gross! How I ever thought this was an elegant solution, I don’t know. But going back to what Dave says is perfectly illustrated in the code above. Using :not() allows you to only manage exceptions instead of all this. The actual elements that I want to “embiggen” as Dave calls it, are only a few. This selector would only contain around four or five exceptions.

Anyway, I need to put this on the list of things I need to rewrite for the next redesign.

By Timmmmy

A human hoping to be empathetic and kind with all. I'm a geek, coffee drinker, stoner, maker of things, and forever an optimist. Brightly-colored clothes weren't enough, so I dye my hair too (he/him)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s