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

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

Home Forums Support Some dubts with build a home with hooks part II

Viewing 5 posts - 16 through 20 (of 20 total)
  • Author
    Posts
  • #1544643
    David
    Staff
    Customer Support

    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.

    #1557823
    rafel jesus

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

    Thanks

    Best wishes.
    From Balaguer, near of Barcelona

    #1558158
    David
    Staff
    Customer Support

    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.

    #1563671
    rafel jesus

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

    Best wishes.
    From Balaguer, near of Barcelona

    #1563675
    David
    Staff
    Customer Support
Viewing 5 posts - 16 through 20 (of 20 total)
  • You must be logged in to reply to this topic.