[Resolved] Some dubts with build a home with hooks part II

[David]

Cool – almost there.
Edit the Header Element – in the Element Classes field add: slider

Then add this CSS:

.page-hero.slider {
    position: relative;
}
.page-hero.slider h1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-color: rgba(0,0,0,0.25); /* Overlay color */
}
.page-hero.slider .metaslider {
    padding-bottom: 0;
}

Note this line is optional:
background-color: rgba(0,0,0,0.25); /* Overlay color */

This adds a background overlay to cover the slider.

[rafel jesus]

Hi David
Excuse my delay, your solution it worked, but now how can I do more image in mobile?

Thanks

[David]

Try adding this CSS:

@media(max-width: 769px) {
    .flexslider .slides img {
        min-height: 560px;
        object-fit: cover;
    }
    .metaslider.ms-theme-cubic.ms-is-small {
        padding-bottom: 0 !important;
    }  
}

Then edit your Header Element – and remove the Bottom Padding.

[rafel jesus]

Hi David.
It’s working.
Thanks for your help.

[David]

Glad to hear that!

[Author]

Posts