Smart Slider 3 slide used as header is stretched to width of screen

[Gabi]

I’m using a Smart Slider 3 single slide in order to have clickable parts go to specific pages (like an old HTML image map) and I figured out how to get it there with a Hook set to “Entire Site” with “Execute Shortcodes” marked and the only thing pasted in is
[smartslider3 slider=4]

The slide is 1093 by 317 pixels, but it is being stretched to the width of the whole screen and I can’t figure out where that setting is.

Any help is appreciated!
Gabi

[Leo]

Hi there,

Which hook are you using currently?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Gabi]

I’m using the Header hook.

[Leo]

Try the before_header hook like this:

<div class="grid-container grid-parent">
    [smartslider3 slider=4]
</div>

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Gabi]

I tried that and it didn’t change. 🙁

I also added another slider on the homepage and it is stretching it also.
When I preview these within Smart Slider they look right.

thanks,
Gabi

[Leo]

Can you please do this first?
https://www.screencast.com/t/cPh1dY1vcmm

The code is showing that the top one is not added using this method:
https://generatepress.com/forums/topic/smart-slider-3-slide-used-as-header-is-stretched-to-width-of-screen/#post-904806

The bottom is full width because this setting is being used:
https://docs.generatepress.com/article/page-builder-container/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Gabi]

Hi Leo (my grandson’s name)

I cleared the cashe and disabled the cashing plugin.

You wrote:
The code is showing that the top one is not added using this method:
https://generatepress.com/forums/topic/smart-slider-3-slide-used-as-header-is-stretched-to-width-of-screen/#post-904806

But that link is to this post we are in now.

And with https://docs.generatepress.com/article/page-builder-container/
the closest I could find was in Elements, Sidebar Layout, which I have set to Default
Is that what you mean? I don’t see any changes.

Gabi

[Leo]

The code is added correctly now.

It’s still not working as the slider has a defined width to it:
https://www.screencast.com/t/O3xWlboIyKm

As for the full-width container option, check the Layout metabox for on that page.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Gabi]

It works!
I changed the container on the page and set the slider width to 1093 by 317 pixels which fixed that.

Thank you so much!
Gabi

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts