Full width Metaslider & margin

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 :)

Yep, worked perfectly!

Thanks, Tom!

You're welcome! Nice site! :)

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)); ?

You could try adding that to the metaslider class:

.metaslider {
     ...
}

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

Wow, VERY nice! Great job :)