[Resolved] Full width Metaslider & margin

[anamoore]

Hello!

I have a metaslider in After Header GP Hooks.
I’m trying to make the metaslider be full width (not just like the content width). Furthermore, I want something like 30 px top space between navigation and metaslider. Can you help me?

here

[Tom]

It looks like you wrapped your slider in a div with the “grid-container grid-parent” classes.

If you remove those classes, it should go full width.

Instead of those classes, add something like this: roxi-slider

So it looks like:

<div class="roxi-slider">
      slider shortcode
</div>

Then add this CSS:

.roxi-slider {
      margin-top: 30px;
}

Hope this helps 🙂

[anamoore]

Yep, worked perfectly!

Thanks, Tom!

[Tom]

You’re welcome! Nice site! 🙂

[anamoore]

Oh, thank you for the compliments!

May I stress you a little more…? Do you have any ideas how can I add a gradient overlay over the metaslider?

something like… linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); ?

[Tom]

You could try adding that to the metaslider class:

.metaslider {
     ...
}

[anamoore]

I edited the caption of the slider, not the metaslider itself: moved it to the top, centered the text, changed the font, added gradient to it and the result is: here

[Tom]

Wow, VERY nice! Great job 🙂

[Author]

Posts