Single entry with full width hero image and sidebar using Bootstrap layout and DRY

[anon21078981]

Hello,

I’m trying to achieve the following layout in Sage 9 while preserving the default layout and DRY principles.

Please note:

• image, header and .entry-content are within the main element
• .sidebar is within the aside element

The image and header should pop out of main and stretch to the full width of article.

I realize this probably isn’t too complicated to achieve with some basic absolute positioning techniques.The complexity is introduced by the fact that header can be of variable height depending on the length of the text and that the vertical position of aside should adjust relative to this.

Would love some help with this. Thanks!

[MWDelaney]

There are any number of solutions to this and it isn’t really a Sage-specific question. A few options are…

• Any of the suggestions in this CSSTricks article
• Or what I do is remove the container class from the theme wrapper and add a <div class="container"> where I actually need one.

[anon21078981]

Hi thanks for your response.

I don’t see how moving the container would help. Wouldn’t I still need to edit app.blade.php and move the sidebar to the template partial?