Parallax full width not working (even with add_theme_support)

Hey @mkuez,

Congrats! We’re glad you got ASE working.

To answer your question, add_theme_support adds basic styles to each of the components, but doesn’t make the components full-width. Each theme tends to place the_content within a center column, but there are ways to break the components out of the “content” area.

You could apply the theme content width to the paragraph elements. This way the components can run full-width. Each component has it’s own width option built-in. If you choose “content” as the width option in any component, the class .aesop-content is applied. It’s recommended to set your site’s width into this class.

Here’s an example:

p,
.aesop-content {
width:100%;
max-width:960px;
margin:0 auto;
}

Here’s an article explaining the approach:
https://aesopstories.com/themes/content-first

Let us know how you go about.

Hey guys,

I had a look at this, still don’t have a nice solution, but looking here, I have seen that creating a custom div with with:100% works. This is sort of like creating a custom css row div in
bootstrap (meaning: you basically break the content div).

Something like:

<div class=”post-content section-inner wide”>Full width image</div>

Would probably work.

Question: is there a way to break a div without manually inserting html when using a parallax component? Basically all the output from the editor seems to go inside one div with the thin column style, I should have something that breaks that div, creates a full width one, then breaks the full width one and creates a new thin one after the image.

Hey @mkuez,

There’s definitely a way to do it without inline markup.

Just like I mentioned above, you can use some custom CSS within your theme (make sure you have a child theme or use the plugins called Code Snippets and Simple Custom CSS). See: https://aesopstoryengine.com/developers.

You will need to change the IDs and class names, but you can follow along with this article regarding ASE on Canvas: https://www.woothemes.com/2015/01/write-stories-instead-of-code-five-steps-to-storytelling-with-canvas.