Home Forums Pro Themes Bizplan Pro Slider on Frontpage

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #67528
    Mehnaz Ladha
    Participant

    I’m encountering a problem with the slider on the front page. I’ve resized the featured images on all slides to be the same dimensions, yet when I browse through the slider, some of the slides are shorter than the others. Any idea why?

    #67557
    wensolutions
    Keymaster

    Hello @mladha,

    Can you post your site URL so that we can inspect what exactly your issues is and help you further?

    Thank you :).

    Best Regards!!

    #67560
    Mehnaz Ladha
    Participant

    Yes, it’s mehnazladha.com/errosthe. You’ll notice that only one slide (Coffee Nation Coffee Roasters) has the picture showing in full. All the other ones are cut off.

    #67589
    wensolutions
    Keymaster

    Hello @mladha,

    When we inspected your site URL we found that you have enabled the banner image but not the slider.

    So please enable the slider and let us know so that we can look further into the issue.

    Also please make sure to upload the image of uniform size in the slider.

    Thank you 🙂 .

    Best Regards!!

    #67607
    Mehnaz Ladha
    Participant

    Hello,

    The slider image is enabled. All photos used for the slider are of uniform size – 2000 pixels by 1500 pixels. I deleted all the photos from the server and replaced them too. But the slider is still not showing the full image for 3 out of 5 of the slides.

    Please advise what I should do.

    Best,
    Mehnaz

    #67616
    wensolutions
    Keymaster

    Hello @mladha,

    The issue is due to the length of the text.

    Now to resolve the issue please use below-given CSS by going to Admin Panel > Appearance > Customize > Additional CSS.

    .block-slider .slide-item .banner-overlay {
        background-color: transparent;
    }
    .block-slider .slide-item:before {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        content: '';
        background-color: rgba(0, 0, 0, 0.6);
    }
    .block-slider .slide-item {
        position: relative;
        min-height: 620px;
    }

    Hope this helps.

    Best Regards!!

    #67659
    Mehnaz Ladha
    Participant

    Hi, I successfully used the given CSS. I did notice, however, that on Chrome, the problem persists once I’m out of the Customize mode. I opened the same page on Safari, and the slider seems fine. Is there a way to ensure that it works on all browsers?

    Best,
    Mehnaz

    #67682
    wensolutions
    Keymaster

    Hello @mladha,

    As mentioned earlier the issue is due to length of the title of each slider and the scroll down box.

    However you can fix the issue by increasing the min-height in the above provided CSS.

    So now replace the above given CS with the CSS given below:

    .block-slider .slide-item .banner-overlay {
        background-color: transparent;
    }
    .block-slider .slide-item:before {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        content: '';
        background-color: rgba(0, 0, 0, 0.6);
    }
    .block-slider .slide-item {
        position: relative;
        min-height: 680px !important;
    }

    Hope this helps.

    Best Regards!!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.