Aesop Story Engine looks best on the themes with full width component supports. Most themes however restrict the width of the post contents. Modifying your theme to support full width contents requires some changes to the CSS codes. Let’s take the generic Twenty Seventeen theme for example. Obviously the content area is not full width. The first step is to find the class of your content area. To follow this tutorial, you need the knowledge covered in this link: How To Find The ID Or Class Name For An Element To Use In Custom CSS

Usually the class is .entry-content, but you can find it using the inspector in your browser. In the following example with Twenty Seventeen, the content area is highlighted and its class is .entry-content.

So let’s add some Custom CSS

.entry-content {
   width:100%;
   max-width: 100%;
}

Actually, if you add this Custom CSS code, you will find that it didn’t change anything. It’s because .entry-content is stuck in another container with a limited width. Using the inspector, you can find that the limiting parent containers are .wrap and .content-area. So let’s change the code:

.wrap,
.content-area,
.entry-content,
{
    width:100% !important;
    max-width: 100% !important;
}

Now this is what it looks like:

Great! Now one thing you may want to do is to limit the widths of the text paragraphs for better readability. So here is an example code to center the text and limit its width to 700px.

.wrap .content-area .post p,
.wrap .content-area .post h1{
    max-width:700px;
    margin-left: auto;
    margin-right: auto;
}

Now the Twenty Seventeen theme is compatible with full width components. Granted, things are not quite perfect. You may notice things like the widget area being a little confused and not knowing where to go. But this should give you a good idea on how the full-width components work. If you want to look into the themes built with Aesop in mind from the ground up, check out our themes sections.