[Resolved] Smart Slider element spills out, isn't contained

[Curt]

Just built my first element, where I’m trying to insert a Smart Slider just under the header and before my first content piece. Almost everything works, but the Slider is full screen whereas I have the rest of the header/page contained. So it spills over on both sides.

I built the element as Hook > Header > after_header. Display rules: Front Page.

The element body just has the shortcode: [smartslider3 slider=2]

I just need the slider to inherit the header container style. Do I need to apply a class to that slider and replicate the header container style?

[Curt]

Holy crap, I found it! Generate ‘inside container’. This page laid it all out for me: Hooks Visual Guide

[David]

Glad to hear you found the solution 🙂

If the hook is outside of the container you can wrap your content in a DIV with a class of grid-container e.g

<div class="grid-container my-custom class">
<!-- Your content here -->
</div>

Also add your own custom-class for specific stlying.

[Author]

Posts